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上 一 版 详 者 序 


网 上 的 生活 越 来 越 丰 富 多 彩 。 从 最 初 的 (XIHIMEL 网 页 ， 到 一 度 热 炒 的 
DHTML 概 念 ， 再 到 近 几 年 流行 起 来 的 CSS， 网 站 和 网 页 的 设计 工作 变 
得 越 来 越 简 便 ， 网 上 的 内 容 越 来 越 富 于 变化 和 色彩 。 但 是 ， 很 多 网 页 设 
计 者 和 网 民 朋 友 都 不 太 喜 欢 JavaScript， 这 主要 有 以 下 几 方 面 原因 。 第 
一 ， 很 多 网 页 设计 者 认为 JavaScript 的 可 用 性 很 差 一 一 早期 的 浏览 器 彼此 
很 少 兼容 ， 如 果 想 让 目 己 编写 出 来 的 JavaScript 脚 本 在 多 种 浏览 器 环境 里 
运行 ， 就 必须 编写 许多 用 来 探测 浏览 器 的 具体 品牌 和 具体 版 本 的 测试 及 
分 支 代码 (术语 称 之 为 “浏览 右 嗅 探 ” 代 码 ) 。 这 样 的 脚本 往往 到 处 

是 if.. .else 语句 ， 既 不 容易 阅读 ， 又 不 容易 复查 和 纠 错 ， 更 难以 做 到 
让 同一 个 脚本 适用 于 所 有 的 浏览 占 。 第 二 ， 对 广大 的 网 民 来 说 ， 
JavaScript 网 页 的 可 访问 性 很 看 一 一 浏览 器 会 时 不 时 地 弹出 一 个 报错 窗口 
甚至 导致 系 统 死 机 ， 让 人 乘 兴 而 来 、 败 兴 而 去 。 第 三 ，JavaScript 被 很 多 
网 站 用 来 实现 弹出 广告 窗口 的 功能 ， 人 们 厌烦 这 样 的 广告 ， 也 就 “ 恨 ” 屋 
及 马 地 厌烦 起 JavaScript 来 了 。 第 四 , “JavaScript” 这 个 名 字 里 的 “Java” 往 
往 让 人 们 误 以 为 其 源 于 Java 语 言 ， 而 实际 接触 之 后 才 发 现 它们 根本 没有 
任何 联系 。 与 Java 语 言 相 比 ，JavaScript 语 言 要 简单 得 多 。 很 多 程序 员 宁 
肯 钻 研 Java， 也 不 愿意 去 了 解 JavaScript 的 功能 和 用 法 。 


不 管 什么 原因 ，JavaScript 曾 经 不 受 欢迎 的 确 是 一 个 事实 。 


现在 ， 情 况 发 生 了 极 大 的 变化 。 因 为 几 项 新 技术 的 出 现 ，JavaScript 的 春 
天 似乎 来 了 。 首 先 ，W3C “万 维 网 联盟 ) 推出 的 标准 化 

DOM (Document Object Model， 文 档 对 象 模 型 ) 已 经 一 统 江 湖 ， 目 前 

市 场 上 常见 的 浏览 器 可 以 说 没有 不 文 持 的 。 这 对 网 页 设计 者 来 说 意味 独 
可 以 用 简单 的 “对 象 检测 ”代码 来 取代 那些 或 复 的 浏览 器 品 探 代码 ， 而 按 
照 DOM 编 写 出 来 的 JavaScript 页 面 不 像 过 去 那样 容易 出 问题 ， 这 对 网 民 

来 说 意味 着 浏览 体验 变 得 流畅 了 。 其 次 ， 最 近 兴 起 的 Ajax 技术 以 DOM 

和 JavaScript 语 言 〈 以 及 CSS 和 XHTML ) 为 基本 要 素 ， 基 于 Ajax 技术 的 

网 站 离 不 开 JavaScript 和 DOM 脚 本 。 


其 实 ， 人 们 对 JavaScript 的 恶劣 印象 在 很 大 程度 上 来 源 于 早期 的 程序 员 对 
这 种 语言 的 滥用。 如 有 果 程 序 员 在 编写 JavaScript 脚 本 的 时 候 能 够 把 问题 考 
碟 得 面面俱到 ， 就 可 以 避免 许多 问题 ， 但 可 惜 的 是 如 此 优秀 的 程序 员 太 





























少 了 。 事 实 上， 即使 是 在 JavaScript 已 经 开始 流行 起 来 的 今天 ， 如 果 程 序 
员 在 编写 JavaScript 脚 本 的 时 候 不 遵守 相关 的 标准 和 编程 准则 ， 也 仍 会 导 
致 各 种 各 样 的 问题 。 


在 2002 年 前 后 ，CSS 也 是 一 种 不 太 受 人 们 欢迎 的 web 显示 语言 ， 除 了 用 
它 来 改变 一 下 字体 ， 几 乎 没有 人 用 它 来 干 其 他 的 事情 。 但 没 过 多 久 ， 人 
们 对 利用 CSS 设 计 网 页 布局 的 兴趣 就 一 发 而 不 可 收拾 ， 整 个 潮流 也 从 那 
时 扭转 了 过 来 。 现 在 ， 掌 握 CSS 已 经 成 为 许多 公司 在 招聘 网 站 开发 人 员 
时 的 一 项 要 求 。 


目前 ，DOM 编 程 技术 的 现状 与 CSS 技 术 在 2002 年 时 的 境况 烦 有 几 分 相 
似 。 受 Google Maps 和 Flickr 等 著名 公司 利用 DOM 编 程 搁 术 推 出 的 
Gmail. Google Suggest 等 新 型 服务 的 影响 和 带动 ，DOM 编 程 人 才 的 需 
求 正 日 益 增 加 。 有 越 来 越 多 的 人 开始 迷 上 了 脚本 编程 技术 ， 并 开始 学 习 
如 何 利 用 DOM 技 术 去 改善 而 不 是 妨碍 网 站 的 可 用 性 和 可 访问 性 。 


本 书 的 作者 Jeremy Keith 是 Web 标 准 计划 DOM Scripting 任 务 组 的 负责 
之 一 ， 他 在 这 本 书 里 通过 大 量 示 例证 明了 这 样 一 个 事实 : 只 要 运用 得 
当 ， 并 且 注 意 避 开 那 些 “ 经 典 的 >JavaScript 陷 阱 ，DOM 编 程 技术 就 可 以 
成 为 Web 开 发 工具 箱 里 又 一 件 功能 强大 甚至 是 不 可 或 缺 的 好 东西 。 


本 书 并 不 是 一 本 参考 大 全 类 型 的 图 书 ， 作 者 只 重点 介绍 了 几 种 最 有 用 的 
DOM 方 法 和 属性 。 本 书 的 精华 在 于 作者 在 书 中 提 到 的 关于 JavaScript 和 
DOM 脚 本 编程 工作 的 基本 原则 、 民 好 习惯 和 正确 思路 。 如 果 读 者 能 通 
过 书 中 的 几 个 案例 真正 领悟 这 些 原 则 、 习 惯 和 思路 ， 惑 一 定 能 让 目 己 的 
编程 技术 再 上 一 个 合 阶 。 

这 是 一 本 非常 实用 的 好 书 ， 是 一 本 值得 一 读 再 读 的 好 书 。 作 为 本 书 的 译 
者 ， 我 们 相信 它 会 让 每 位 读者 、 目 建 网 站 的 设计 者 和 来 到 目 建 网 站 的 访 
问 者 都 受益 菲 浅 。 


参加 本 书 翻译 的 人 员 还 有 韩 兰 、 李 和 泵 山 、 胡 普 平 、 高 文雅 。 
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第 2 版 已 经 出 版 了 。 

首先 ， 我 要 澄清 一 点 : 虽然 我 的 名 字 印 在 了 封面 上 ， 但 我 并 没有 参与 这 
个 版 本 的 修订 工作 。 这 个 新 版 本 完全 出 自 Jeffrey Sambells 之 手 。 出 版 社 
因为 出 新 版 的 事 找 过 我 ， 但 我 的 时 间 确 实 安排 不 开 了 。 因 此 ， 看 到 自己 
的 名 字 系 列 其 间 ， 心 中 不 禁 顿 生 愧 意 。 


我 很 高 兴 地 加 读者 朋友 们 报告 ， 新 版 本 中 所 有 的 修订 卷 非常 符合 我 的 期 








望 一 一 英文 原 书 的 封面 除外 。 但 不 管 怎 么 说 ， 第 二 版 的 内 容 真 的 是 太 好 
J! 在 上 一 版 的 基础 上 ， 新 版 经 过 了 扩展 ， 涵 盖 了 如 下 三 个 新 领域 : 

e HTML5 

e Ajax 


e JavaScript 库 (尤其 是 jQuery) 


相 比 之 下 ， 新 版 的 内 容 又 扩充 了 不 少 ， 但 整 本 书 仍然 一 直 在 强调 最 佳 实 
践 〈 特 别 是 渐进 增强 ) ， 这 正 是 让 我 喜出望外 的 地 方 。 


新 版 本 中 的 代码 示例 全 部 换 成 用 HTML5 标 记 来 号 了 。 有 关 Ajax 的 示例 
代码 也 精简 得 当 ， 尽 管 简略 ， 但 上 下 文 仍然 能 够 传达 出 我 在 Bulletproof 
Ajax 工 中 提出 的 观点 : 永远 不 要 假设 Ajax (或 JavaScript， 等 等 ) 一 定 可 
用 。 


1 中 文 版 《Bulletproof Ajax 中 文 版 》 已 经 由 人 民 邮 电 出 版 社 出 版 。 一 一 编者 注 





最 让 我 高 兴 的 一 点 ， 束 是 新 版 本 增加 了 主要 介绍 jQuery 的 章节 。 这 一 章 
把 本 书 前 面 的 典型 代码 示例 ， 使 用 jQuery 重 写 了 一 过 。 这 样 一 来 ， 正 好 
解释 了 人 们 对 为 什么 使 用 库 的 种 种 疑问 。 它 让 你 先 理解 了 底层 代码 的 工 
作 原 理 ， 然 后 再 告诉 你 使 用 库 为 什么 能 市 省 时 间 和 精力 。 


总 而 言 之 ， 这 本 书 新 增 的 内 容 都 十 分 精彩 ， 对 读者 绝对 有 用 。 为 了 尽量 
多 展示 一 些 jQuery 的 方法 ， 也 限于 篇 幅 ， 这 一 版 以 介绍 库 的 附录 代 蔡 了 
上 一 版 介绍 DOM 方 法 的 附录 。 这 多 少 让 我 感到 有 一 些 遗 憾 ， 不 过 ， 我 


会 争取 在 自己 的 博客 上 公布 第 1 版 的 附录 。 


最 后 ， 我 还 是 要 给 第 2 版 再 竖 紧 大 姆 指 ， 另 外 再 给 读者 一 点 建议 。 如 果 
你 买 过 本 书 第 1 版 ， 妨 怕 找 一 些 专门 讲 HTML5、Ajax 或 jQuery 的 书 看 会 
比较 好 。 但 如 果 你 就 是 想 知 道 怎么 才能 正确 地 使 用 JavaScript， 那 这 个 经 
过 扩展 的 新 版 本 就 是 你 的 最 佳 选 择 。 











Jeremy Keith 
2011 年 1 月 3 日 
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这 是 一 本 讲述 一 种 程序 设计 语言 的 书 ， 但 它 不 是 专门 写 给 程序 员 的 ， 而 
主要 是 写 给 Web 设 计 师 的 。 具 体 地 说 ， 本 书 是 为 那些 喜欢 使 用 CSS 和 
HTML 并 愿意 遵守 编程 规范 的 web 设计 师 们 编写 的 。 


本 书 由 代码 和 概念 两 大 部 分 构成 。 不 要 航 那 些 代 码 吓 倒 ， 我 知道 它们 乍 
看 起 来 很 晓 人 ， 可 只 要 抓 住 了 代码 背后 的 概念 ， 就 会 发 现 你 是 在 用 一 种 
新 语言 去 阅读 和 编写 代码 。 


学 习 一 种 新 的 程序 设计 语言 看 起 来 可 能 很 难 ， 但 事实 却 并 非 如 此 。 
DOM 脚 本 看 起 来 似乎 比 CSS 更 复杂 ， 可 只 要 领悟 了 它 的 语法 ， 你 就 会 发 
现 自己 又 掌握 了 一 样 功能 强大 的 Web 开 发 工具 。 归 根 结 底 ， 代 码 都 是 思 
想 和 概念 的 体现 。 


我 在 这 里 要 告诉 大 家 一 个 秘密 : 其 实 没 人 能 把 一 种 程序 设计 语言 的 所 有 
语法 和 关键 字 都 记 住 。 如 果 有 拿 不 准 的 地 方 ， 查 阅 参 考 书 就 全 解决 了 。 
但 本 书 不 是 一 本 参考 大 全 。 本 书 只 介绍 最 基本 的 JavaScript 语 法 。 


本 书 的 真正 目的 是 让 大 家 理解 DOM 脚 本 编程 技术 背后 的 思路 和 原则 ， 
或 许 你 对 其 中 一 部 分 早 就 熟悉 了 。 平 稳 退 化 、 渐 进 增强 、 以 用 户 为 中 心 
的 设计 对 任何 前 器 Web 开 发 工作 都 非常 重要 。 这 些 思 路 贯穿 在 本 书 的 所 
有 代码 示例 中 。 


你 将 会 看 到 用 来 创建 图 片 库 页 面 的 脚本 、 用 来 创建 动画 效果 的 脚本 和 用 
来 丰富 页 面 元 系 呈 现 效 果 的 脚本 。 如 末 你 愿意 ， 完 全 可 以 把 这 些 例子 前 
贴 到 目 己 的 代码 中 ， 但 更 重要 的 是 理解 这 些 代码 背后 的 “如 何 ” 和 “为 什 
AA. 


AR CALE EA CSS AIH TMLRIE UTE AS E Pe LT Hz HERI IRE UL, w 
应 该 知道 Web 标 准 有 多 么 重要 。 还 记得 你 是 在 何 时 发 现 目 己 只 需 修 改 一 
个 CSS 文 件 就 可 以 改变 整个 网 站 的 视 沉 效果 吗 ? DOM 技 术 有 着 同样 强大 
的 威力 。 不 过 ， 能 力 越 大 ， 责 任 也 就 越 大 。 因 此 ， 我 不 仅 想 让 你 看 到 用 
DOM 脚 本 实现 的 超 酷 效果 ， 更 想 让 你 看 到 怎样 才能 利用 DOM 脚 本 编程 
技术 以 一 种 既 方 便 上 自己 更 体贴 用 尸 的 方式 去 充实 和 完善 网 页 。 



































如 果 需 要 本 书 所 讨论 的 相关 代码 1 ， 到 www.friendsofed.com 网 站 搜索 本 
书 的 主页 就 可 以 查 到 。 还 可 以 在 这 个 网 站 找到 friends of ED 出 版 社 的 所 
有 其 他 好 书 ， 内 容 涉 及 Web 标 准 、Flash、DreamWeaver 以 及 许多 细 分 的 
计算 机 领域 。 


1 本 书 代码 示例 也 可 从 图 灵 网 站 www.turingbook.com 本 书 网 页 免费 注册 下 载 。 一 编者 注 








你 对 JavaScript 的 探索 不 应 该 在 合 上 本 书 时 就 停止 下 来 。 我 开设 了 
http://domscripting.com/ 网 站 ， 在 那里 继续 与 大 家 共同 探讨 现代 的 、 标 准 
化 的 JavaScript。 我 希望 你 能 到 该 网 站 看 看 。 与 此 同时 ， 我 更 希望 本 书 能 
够 对 大 家 有 所 帮助 。 祝 你 们 好 运 ! 


致谢 


没有 我 的 朋友 和 同事 Andy Budd! Chttp://www.andybudd.com ) 与 
Richard Rutter Chttp://www.Clagnut.com ) 的 帮助 ， 本 书 的 面世 就 无 从 谈 
起 。Andy 在 我 们 的 家 乡 Brighton 开 设 了 一 个 名 为 

Skillswap Chttp://www.skillswap.org ) 的 免费 培训 网 站 。 在 2004 年 7 月 ， 
Richard 和 我 在 那里 做 了 一 次 关于 JavaScript 和 DOM 的 联合 演讲 。 演 讲 结 
束 后 ， 我 们 来 到 附近 的 一 家 小 酒馆 ， 在 那里 ，Andy 建 议 我 把 演讲 的 内 
容 扩 展 成 一 本 书 ， 也 就 是 本 书 的 第 1 版 。 


1 Andy Budd 是 超级 畅销 书 《精通 CSS: 高 级 Web 标 准 解 决 方案 (第 2 版 )》 的 作者 ， 该 书 已 由 
人 民 邮 电 出 版 社 出 版 。 编者 注 






































如 果 没 有 两 方面 的 帮助 ， 我 大 概 永 远 也 学 不 会 编写 JavaScript 代 人 码 。 一 方 
面 是 几乎 每 个 Web 浏 览 器 里 都 有 “view source”( 查 看 源 代 码 ) 选项 。 谢 
谢 你 , "view source”。 另 一 方面 是 那些 多 年 来 一 直 在 编写 让 人 叹为观止 
的 代码 并 解说 重要 思路 的 JavaScript 大 师 们 。Scott Andrew. Aaron 


Boodman、 Steve Champeon、 Peter-Paul Koch, Stuart Langridge 和 Simon 


Willison 只 是 我 现在 能 想到 的 几 位 。 感 谢 你 们 所 有 人 的 分 享 精神 。 


感谢 Molly Holzschlag 与 我 分 享 她 的 经 验 和 忠告 ， 感 谢 她 对 本 书 初 稿 给 予 
反馈 意见 。 感 谢 Derek Featherstone 与 我 多 次 愉快 地 讨论 JavaScript 问 题 ， 
我 喜欢 他 思考 和 分 析 问 题 的 方法 。 


我 还 要 特别 感谢 Aaron Gustafson， 他 在 我 写作 本 书 期 间 回 我 提供 了 许多 
宝 贯 的 反馈 和 灵感 。 


在 写作 第 1 版 期 间 ， 我 有 邓 参 加 了 两 次 非常 棒 的 盛会 : 在 得 殉 萨 斯 州 
Austin 举 办 的 “South by Southwest>” 和 在 伦敦 举办 的 @media。 我 要 感谢 这 
两 次 盛会 的 组 织 者 Hugh Forrest 和 Patrick Griffiths， 是 他 们 让 我 有 机 会 结 
B cen 我 从 没 想 过 我 能 有 机 会 与 他 们 成 为 朋友 和 同 


最 后 ， 我 要 感谢 我 的 妻子 Jessica Spengler， 不 仅 因 为 她 永远 不 变 的 支 
持 ， 还 因为 她 在 本 书 初 稿 的 校对 工作 中 做 出 的 专业 帮助 。 谢 谢 你 ， 我 的 








人 生 伴 但。 





Jeremy Keith 
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本 章 内 容 


e JavaScript 的 起 源 
。 浏览 器 战争 
。DOM 的 演变 史 


本 书 第 1 版 面世 的 时 候 ， 做 一 名 Web 设 计 师 是 件 很 让 人 很 兴奋 的 事 。5 个 
年 头 过 去 了 ， 这 个 职业 依然 保持 着 强大 的 吸引 力 。 特 别 是 JavaScript， 经 
历 了 从 被 人 误解 到 万 众 瞩目 的 巨大 转变 。Web 开 发 呢 ， 也 已 从 混乱 无 序 
的 状态 ， 发 展 成 一 门 需要 严格 训练 才能 从 事 的 正规 职业 。 无 论 设 计 师 还 
zl m 在 创建 网 站 的 过 程 中 都 积极 地 采用 标准 技术 ，Web 标 准 已 
经 深 心 。 


当 网 页 设计 人 员 谈 论 起 与 Web 标 准 有 关 的 话题 时 ，HTML 〈 超 文本 标记 
语言 》 和 CSS ( 层 闭 样式 表 ) 通常 占据 着 核心 地 位 。 不 过 ，W3C〔 万 维 
网 联盟 ) 已 批准 另 一 项 技术 ， 所 有 与 标准 相 兼 容 的 Web 浏 览 器 都 文 持 
它 ， 这 就 是 DOM (文档 对 象 模型 )。 我 们 可 以 利用 DOM 给 文档 增加 交 
互 能 力 ， 就 像 利用 CSS 给 文档 添加 各 种 样式 一 样 。 


在 开始 学 习 DOM 之 前 ， 我 们 先 检视 一 下 使 网 页 具备 交互 能 力 的 程序 设 
计 语 言 。 这 种 语言 就 是 JavaScript， 它 已 经 诞生 相当 长 的 时 间 了 。 











1.4 JavaScript) E Ji 


JavaScript 是 Netscape 公 司 与 Sun 公 司 合作 开发 的 。 在 JavaScript 出 现 之 

前 ，Web 浏 览 器 不 过 是 一 种 能 够 显示 超 文 本 文档 的 简单 的 软件 。 而 在 
JavaScript 出 现 之 后 ， 网 页 的 内 容 不 再 局 限于 枯燥 的 文本 ， 它 们 的 可 交互 
性 得 到 了 显著 的 改善 。JavaScript 的 第 一 个 版 本 ， 即 JavaScript 1.0 版 本 ， 
出 现在 1995 年 推出 的 Netscape Navigator 2 浏览 器 中 。 


在 JavaScript 1.0 发 布 时 ，Netscape Navigator 主 字 着 浏览 器 市 场 ， 微 软 的 
正 浏览 器 则 扮演 着 追赶 者 的 和 角色。 微软 在 推出 下 3 的 时 候 发 布 了 自己 的 
VBScript 语 言 ， 同 时 以 JScript 为 名 发 布 了 JavaScript 的 一 个 版 本 ， 以 此 很 
快 跟 上 了 Netscape 的 步伐 。 面 对 微软 公司 的 竞争 ，Netscape 和 Sun 公 司 联 
合 ECMA 《欧洲 计 算 机 制造 商 协会 ) 对 JavaScript 语 言 进 行 了 标准 化 。 于 
是 出 现 了 ECMAScript 语 言 ， 这 是 同一 种 语言 的 另 一 个 名 字 。 虽 说 
ECMAScript 这 个 名 字 没 有 流行 开 来 ， 但 人 们 现在 谈论 的 JavaScript 实 际 
上 就 是 ECMAScript。 





到 了 1996 年 ，JavaScript、ECMAScript、JScript 一 一 随便 你 们 怎么 称呼 
B 己 经 站 稳 了 脚跟 。Netscape 和 微软 公司 在 各 自 的 第 3 版 浏览 器 中 都 
不 同 程度 地 文 持 JavaScript 1.1 语 言 。 


注意 — JavaScript 与 Sun 公 司 开发 的 Java 程 序 语 言 没 有 任何 联系 。 
JavaScript 最 开始 的 名 字 是 LiveScript， 后 来 选择 “JavaScript” 作 为 其 
正式 名 称 的 原因 ， 大 概 是 想 让 它 听 起 来 有 系 出 名 门 的 感觉 。 但 令 人 
遗憾 的 是 ， 这 一 选择 容易 让 人 们 把 这 两 种 语言 混为一谈 ， 而 这 种 泥 
清 义 因为 各 种 Web 浏 览 器 确实 具备 这 样 或 那样 的 Java 客 户 端 文 持 功 
能 而 进一步 加 剧 。 事 实 上 ，Java 在 理论 上 几乎 可 以 部 署 在 任何 环 
境 ， 但 JavaScript 却 倾 回 于 只 应 用 在 Web 浏 览 器 。 


JavaScript 是 一 种 脚本 语言 ， 通 常 只 能 通过 Web 浏 览 器 去 完成 一 些 操 作 而 
不 能 像 普 通 意义 上 的 程序 那样 独立 运行 。 因 为 需要 由 Web 浏 览 器 进行 解 
释 和 执行 ， 所 以 JavaScript 脚 本 不 像 Java 和 C++ 等 编译 型 程序 设计 语言 那 
样 用 途 广 泛 。 不 过 ， 这 种 相对 的 简单 性 也 正 是 JavaScript 的 长 处 ;比较 容 
易学 习 和 掌握， 所 以 那些 本 身 不 是 程序 员 ， 但 希望 通过 人 简单 的 筋 贴 操作 
FE PBN AS Be AEA N R AEEA P PR ae SZ 6 JavaScript. 




















JavaScript 还 回程 序 员 提 供 了 一 些 操 控 Web 浏 览 器 的 手段 。 例 如 ， 
JavaScript 语 言 可 以 用 来 调整 Web 浏 览 器 窗口 的 高 度 、 和 宽度 和 位 置 等 属 
性 。 这 种 设 定 浏 览 器 属性 的 办 法 可 以 看 做 是 BOM (浏览 器 对 象 模 
78) 。JavaScript 的 早期 版 本 还 提供 了 一 种 初级 的 DOM。 


12 DOM 


I o 简单 地 说 ，DOM 是 一 套 对 文档 的 内 容 进 行 抽象 和 概念 化 
方法 。 


在 现实 世界 里 ， 人 们 对 所 谓 的 “世界 对 象 模型 ?部 不 会 陌生 。 例 如 ， 当 
用 “汽车 “房子 ?和 "“ 树 ”等 名 词 来 称呼 日 常生 活 环境 里 的 事物 时 ， 我 们 
可 以 百分之百 地 肯定 对 方 知道 我 们 说 的 是 什么 ， 这 是 因为 人 们 对 这 些 名 
词 所 代表 的 东西 有 关 同 样 的 认识 。 于 是 ， 当 对 别人 说 “汽车 停 在 了 车 库 
里 ?时 ， 可 以 断定 他 们 不 会 理解 为 “小 鸟 关 在 了 壁橱 里 ”。 


我 们 的 “世界 对 象 模 型 ”不仅 可 以 用 来 描述 客观 存在 的 事物 ， 还 可 以 用 来 
描述 抽象 概念 。 例 如 ， 假 设 有 个 人 癌 我 问 路 ， 而 我 给 出 的 答案 是 “左边 

第 三 栋 房 子 ”。 这 个 答案 有 没有 意义 将 取决 于 那个 人 能 侣 理解 “第 

三 ?和 “左边 ”的 含义 。 如 果 他 不 会 数 数 或 者 分 不 清 左 右 ， 则 不 管 他 是 否 

理解 这 几 个 概念 ， 我 的 回答 对 他 都 不 会 有 任何 帮助 。 在 现实 世界 里 ， 下 
是 因为 大 家 对 抽象 的 世界 对 象 模型 有 大 基本 的 共识 ， 人 们 才能 用 非常 简 
单 的话 表 达 出 复杂 的 含义 并 得 到 对 方 的 理解 。 具 体 到 这 里 的 例子 ， 你 可 
以 相当 有 把 握 地 断定 ， 其 他 人 对 “第 三 ”和 “左边 ”的 理解 和 我 完全 一 样 。 


这 个 道理 对 网 页 也 同样 适用 。JavaScript 的 早期 版 本 向 程序 员 提 供 了 查询 
和 操控 Web 文 档 某 些 实际 内 容 〈 主 要 是 图 像 和 表单 ) 的 手段 。 因 为 

JavaScript 预 先 定义 了 “images” 和 “forms” 等 术语 ， 我 们 才能 像 下 面 这 样 在 
p ey 用 “文档 中 的 第 三 个 图 像 ?或 “文档 中 名 为 "details 的 表 























document .images[2] 
document.forms['details'] 





现在 的 人 们 通常 把 这 种 试验 性 质 的 初级 DOM 称 为 "第 0 级 DOM” (DOM 
Level 0) 。 在 还 未 形成 统一 标准 的 初期 阶段 , “第 0 级 DOM2” 的 常见 用 途 
是 翻转 图 片 和 验证 表单 数据 。Netscape 和 微软 公司 各 自 推 出 第 四 代 浏 览 
器 产品 以 后 ，DOM 开 始 遇 到 凤 烦 ， 陷 入 困境 。 


1.3 浏览 器 战争 


Netscape Navigator 4 发 布 于 1997 年 6 月 ，IE 4 发 布 于 同年 10 月 。 这 两 种 浏 
览 器 都 对 它们 的 早期 版 本 进行 了 许多 改进 ， 大 幅 扩 展 了 DOM， 使 能 够 

通过 JavaScript 完 成 的 功能 大 大 增加 。 而 网 页 设计 人 员 也 开始 接触 到 一 个 
新 名 词 : DHTML. 


1.3.1 DHTML 


DHTML # “Dynamic HTML” CXI&HTMLO ) 的 简称 。DHTML 并 不 是 一 
项 新 技术 ， 而 是 描述 HTML、CSS 和 JavaScript 技 术 组 合 的 术语 。 
DHTML Jn B XÆ: 


。 利 用 HIML 把 网 页 标记 为 各 种 元 素 ; 
。 利用 CSS 设 置 元 素 样式 和 它们 的 显示 位 置 ; 
e 利用 JavaScript 实 时 地 操控 页 面 和 改变 样式 。 


利用 DHTML， 复 杂 的 动画 效果 一 下 子 变 得 非常 容易 实现 。 例 如 ， 用 
HTML 标 记 一 个 页 面 元 素 : 





<div id="myelement">This is my element</div> 





然后 用 CSS 为 这 个 页 面 元 素 定 义 如 下 位 置 样式 : 


#myelement { 
position: absolute; 
left: 50px; 
top: 100px; 


} 





接 下 来 ， 只 需 利 用 JavaScript 改 变 myelement 元 素 的 left 和 top 样式 ， 
就 可 以 让 它 在 页 面 上 随意 移动 。 不 过 ， 这 只 是 理论 而 已 。 


ANSE FE, NN 4 和 IE 4 浏览 器 使 用 的 是 两 种 不 兼容 的 DOM。 换 人 句 话 
说 ， 虽 然 浏 览 器 制造 两 的 目标 一 样 ， 但 他 们 在 解决 DOM 问 题 时 采用 的 
办 法 却 完全 不 同 。 


1.3.2 浏览 器 之 间 的 冲突 


Netscape 公 司 的 DOM 使 用 了 专 有 元 素 ， 这 些 元 素 称 为 层 (layer) 。 层 
有 唯一 的 ID，JavaScript 代 码 需 要 像 下 面 这 样 引 用 它们 : 





document.layers['myelement'] 





而 在 微软 公司 的 DOM 中 这 个 元 系 必 须 像 下 面 这 样 引用 : 


document.all['myelement'] 





这 两 种 DOM 的 差异 并 不 止 这 一 点 。 假 设 你 想 找 出 myelement 元 素 的 
left 位 置 并 把 它 赋值 给 变量 xpos ， 那 么 在 Netscape Navigator 4 浏览 器 
里 必须 这 样 做 : 


var xpos = document.layers[ 'myelement' ].left; 








而 在 下 4 浏览 器 中 ， 需 要 使 用 如 下 所 示 的 语句 才能 完成 同样 的 工作 : 


var xpos = document.all['myelement'].leftpos; 








这 就 导致 了 一 种 很 可 笑 的 局 面 : 程序 员 在 编写 DOM 脚 本 代码 时 必须 知 
道 它们 将 运行 在 哪 种 浏览 器 环境 里 ， 所 以 在 实际 工作 中 ， 许 多 脚本 都 不 
得 不 编写 两 次 ， 一 次 为 Netscape Navigator， 男 一 次 为 E。 同 时 ， 为 了 确 
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DHTML 打 开 了 一 个 充满 机 会 的 新 世界 ， 但 想 要 进入 其 中 的 人 们 却 发 现 
这 是 个 充满 苦难 的 世界 。 因 此 ， 没 多 久 ，DHTML 就 从 一 个 大 热门 变 成 
了 一 个 人 们 不 愿 提起 的 名 词 ， 而 对 这 种 技术 的 评价 也 很 快 地 变 成 了 “ 宣 
传 嗪 头 " 和 “难以 实现 "。 





L4 制定 标准 


就 在 浏览 器 制造 两 以 DOM 为 武 占 展开 营销 大 战 的 同时 ，W3C 不 事 声 张 
地 结合 大 家 的 优点 推出 了 一 个 标准 化 的 DOM。 令 人 欣慰 的 是 ， 
Netscape、 微 软 和 其 他 一 些 浏 览 器 制造 商 们 还 能 抛 开 彼此 的 敌意 而 与 
W3C 携 手 制定 新 的 标准 ， 并 于 1998 年 10 月 完成 了 “第 1 级 DOM” (DOM 
Level 1) 。 


回 到 刚才 的 例子 ， 我 们 已 经 用 <div> 标签 定义 了 一 个 ID 为 myelement 
的 页 面 元 素 ， 现 在 需要 找 出 它 的 left 位 置 并 把 这 个 值 保存 到 变量 xpos 
中 。 下 面 是 使 用 新 的 标准 化 DOM 时 需要 用 到 的 语法 : 


var xpos = document.getElementById('myelement').style.left 


乍 看 起 来 ， 这 与 刚才 那 两 种 非 标 准 化 的 专 有 DOM 相 比 并 没有 明显 的 改 
进 。 但 事实 上 ， 标 准 化 的 DOM 有 着 非常 远大 的 抱负 。 


浏览 如 制造 丙 们 感 兴 趣 的 只 不 过 十 通过 JavaScript 操 控 网 页 的 具体 办 法 ， 
但 W3C 推 出 的 标准 化 DOM 却 可 以 让 任何 一 种 程序 设计 语言 对 使 用 任何 
一 种 标记 语言 编写 出 来 的 任何 一 份 文档 进行 操控 。 


1.4.1 浏览 器 以 外 的 考虑 


DOM 是 一 种 API (应 用 编程 接口 ) 。 简 单 地 说 ，API 就 是 一 组 已 经 得 到 
有 关 各 方 共 同 认 可 的 基本 约定 。 在 现实 世界 中 ， 相 当 于 API 的 例子 包括 
(但 不 限于 ) 摩尔 斯 码 、 国 际 时 区 、 化 学 元 素 周期 表 。 以 上 这 些 都 是 不 
同学 科 领 域 中 的 标准 ， 它 们 使 得 人 们 能 够 更 方便 地 交流 与 合作 。 如 果 没 
有 一 个 统一 的 标准 ， 事 情 往 往 会 演变 成 为 一 场 灾难 。 别 忘 了 ， 因 混 消 英 
制度 量 衡 与 公制 度量 衡 至 少 导致 过 一 次 火星 探测 任务 的 失败 。 


在 软件 编程 领域 中 ， 虽 然 存 在 着 多 种 不 同 的 语言 ， 但 很 多 任务 却 是 相同 
或 相似 的 。 这 也 正 是 人 们 需要 API 的 原因 。 一 旦 掌握 了 茶 个 标准 ， 融 可 
以 把 它 应 用 在 许多 不 同 的 环境 中 。 虽 然 语 法 会 因为 使 用 的 程序 设计 语言 
而 有 所 变化 ， 但 这 些 约定 却 总 是 保持 不 变 的 。 









































因此 ， 虽 然 本 书 的 重点 是 教会 你 如 何 通 过 JavaScript 使 用 DOM， 当 你 需 
要 使 用 诸如 PHP 或 Python 之 类 的 程序 设计 语言 去 解析 XML 文档 的 时 候 ， 
你 获得 的 DOM 新 知识 将 会 有 很 大 的 帮助 。 


WM cT rU N. ou 
和 脚本 可 以 通过 这 个 接口 动态 地 访问 和 修改 文档 的 内 容 、 结 构 和 样 

式 。”W3C 推 出 的 标准 化 DOM， 在 独立 性 和 适用 范围 等 诸多 方面 ， 都 远 
远 超 出 了 各 自 为 战 的 浏览 器 制造 丙 们 推出 的 各 种 专 有 DOM。 


1.4.2 ”浏览 右 战 争 的 结 


我 们 知道 ， 浏 览 嚣 市场 份额 大 战 中 微软 公司 战胜 了 Netscape， 具 有 讽刺 
意味 的 是 ， 专 有 的 DOM 和 HTML 标 记 对 这 个 最 终结 果 几 乎 没有 产生 影 
啊 。 正 浏览 喜 注 定 能 击败 其 他 对 手 ， 不 过 是 因为 所 有 运行 Windows 操 作 
系统 的 个 人 电脑 都 预 装 了 它 。 


受 浏览 器 战争 影响 最 重 的 人 群 是 那些 网 站 设计 人 员 。 跨 浏览 器 开发 曾经 
是 他 们 的 亚 梦 。 除 了 刚才 提 到 的 那些 在 JavaScript 实 现 方 面 的 差异 之 外 ， 
Netscape Navigator 和 IE 这 两 种 浏览 器 在 对 CSS 的 支持 方面 也 有 许多 非常 
不 同 的 地 方 。 而 编写 那些 可 以 同时 支持 这 两 种 浏览 器 的 样式 表 和 脚本 的 
工作 也 成 了 一 种 黑色 艺术 。 


浏览 器 制造 商 的 自私 姿态 遭 到 人 们 的 激烈 反对 ， 一 个 名 为 Web 标 准 计 划 

(简称 WaSP，http://webstandards.org/ ) 的 小 组 应 运 而 生 。WaSP 小 组 采 
取 的 第 一 个 行动 就 是 ， 发 励 浏览 器 制造 商 们 采用 W3C 和 制定 和 推荐 的 各 项 
标准 ， 也 就 是 在 浏览 器 制造 商 们 的 帮助 下 得 以 起 草 和 完善 的 那些 标准 。 


或 许 是 因为 来 和 目 WaSP 小 组 的 压力 ， 又 或 许 是 因为 企业 的 内 部 决策 ， 下 
一 代 浏 览 融 产品 对 Web 标 准 的 文 持 得 到 了 极 大 的 改善 。 


1.4.3 3 I EG LE 


早期 浏览 器 大 战 至 今 ， 浏 览 器 市 场 已 经 发 生 了 巨大 的 变化 ， 而 且 到 了 今 
天 ， 这 一 切 也 几乎 每 天 都 有 变化 。 有 的 浏览 器 ， 比 如 Netscape 
Navigator， 差 不 多 已 经 从 人 们 的 视野 中 消失 了 ， 而 新 一 代 浏 览 右 则 陆续 
登台 亮相 。 苹 果 公 司 在 2003 年 首次 发 布 了 它 的 Safari 浏 览 占 (基于 
WebKit) ， 它 从 一 开始 就 坚定 不 移 地 遵循 DOM 标 准 。 今 天 ， 

Firefox, Chrome、QOpera 和 IE,， 以 及 一 些 基于 WebKit 的 其 他 浏 蜂 器 都 对 
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注意 WebKit Chttp://webkit.org ) 是 Safari 和 Chrome 采 用 的 一 个 开 
源 Web 浏 览 器 引擎 。 以 WebKit 和 Gecko (Firefox 的 核 

心 ，https://developer.mozilla.org/en/Gecko ) 为 代表 的 开源 引擎 ， 在 
促进 微软 的 Trident (IE 的 核心 ) 等 专 有 浏览 器 引擎 逐步 同 Web 标 准 
靠拢 方面 起 到 特别 积极 的 作用 。 


今天 ， 几 乎 所 有 的 浏览 器 都 内 置 了 对 DOM 的 支持 。20 世 纪 90 年 代 后 期 
的 浏览 器 大 战 的 硝烟 已 经 散 尽 。 现 在 的 浏览 器 厂商 无 一 不 在 争先 灵 ， 后 地 
实现 最 新 规范 。 我 们 已 经 目睹 了 由 异步 数据 传输 技术 (Ajax) 所 引发 的 
学 习 DOM 脚 本 编程 的 热潮 ， 而 HTML5 DOM 的 众多 新 特性 ， 怎 能 不 让 
人 对 Web 的 未 来 浮想 联翩 ? HTML5 极 大 地 改进 了 标记 的 语义 ， 让 我 们 
ii «audio» 和 <video> 得 以 控制 各 种 媒体 ，<canvas> 元 素 具 备 了 完 
善 的 绘图 能 力 ， 浏 览 器 本 地 存储 超越 了 cookie 限 制 ， 更 有 内 置 的 拖 放 支 


+ AKA 
持 ， 等 等 。 








Web 设 计 师 的 日 子 已 经 今 非 背 比 。 尽 管 还 没有 一 款 浏览 器 完美 无 瑕 地 实 
现 W3C DOM， 但 所 有 现代 浏览 器 对 DOM 特 性 的 履 盖 率 都 基本 达到 了 
95%， 而 且 每 款 浏 览 器 都 几乎 会 在 第 一 时 间 实 现 最 新 的 特性 。 这 意味 着 
什么 ? 意味 着 大 量 的 任务 都 不 必 依 靠 分 支 代 码 了 。 以 前 ， 为 了 探查 浏览 
器 ， 我 们 不 得 不 编写 大 量 分 文 判 断 脚 本 ， 现 在 ， 终 于 可 以 实现 “编写 一 
次 ， 随 处 运行 ”的 梦想 了 。 只 要 遵循 DOM 标 准 ， 就 可 以 放心 大 胆 地 去 
做 ， 因 为 你 的 脚本 无 论 在 哪里 都 不 会 遇 到 问题 。 











1.5 ”小结 


1E Bi JavaScript ef BATA, Fea FEB, ANT DEAE 
用 了 不 同 的 办 法 来 完成 同样 的 任务 。 这 一 无 法 回避 的 事实 不 仅 主 字 着 如 
何 编 写 JavaScript 脚 本 代码 ， 还 影响 着 JavaScript 教 科 书 的 编写 方式 。 


JavaScript 教 科 书 往往 会 提供 大 量 的 示例 代码 以 演示 这 种 脚本 语言 的 使 用 
方法 ， 而 完成 同一 项 任务 的 示例 脚本 往往 需要 为 不 同 的 浏览 器 编写 两 次 
或 更 多 次 。 碘 像 你 在 绝 大 多 数 网 站 上 查 到 的 代码 一 样 ， 在 绝 大 多 数 
JavaScript 教 科 书 的 示例 脚本 中 往往 充斥 着 大 量 的 浏览 器 探查 代码 和 分 文 
调用 结构 。 类 似 地 ， 在 JavaScript 技 术 文 档 中 ， 函 数 和 方法 的 清单 也 往往 
是 一 式 多 份 至 少 需 要 标明 哪 种 浏览 器 支持 哪些 函数 和 方法 。 


如 今 这 种 情况 已 经 有 所 改变 。 多 亏 了 标准 化 的 DOM， 不 同 的 浏览 器 在 

完成 同样 的 任务 时 采用 的 做 法 已 经 非常 一 致 。 因 此 ， 在 本 书 中 ， 当 演 
示 如 何 使 用 JavaScript 和 DOM 完 成 茶 项 任务 时 ， 将 不 再 需要 撒 开 主题 去 

探讨 如 何 对 付 不 同 的 浏览 器 。 如 宁 无 特殊 的 必要 ， 本 书 将 尽量 避免 涉及 
任何 一 种 特定 的 浏览 器 。 


此 外 ， 我 们 在 本 书后 面 的 内 容 中 将 不 再 使 用 “DHTML” 这 个 术语 ， 因 为 
这 个 术语 与 其 说 是 一 个 技术 性 词语 ， 不 如 说 是 一 个 市 场 营销 嗪 头 。 首 

先 ， 它 听 起 来 很 像 是 HTML 或 XHTML 语言 的 另 一 种 扩展 ， 因 而 很 容易 

造成 误解 或 混淆 其 次 ， 这 个 术语 容易 勺 起 一 些 痛苦 的 回忆 一 一 如 果 你 
问 20 世 纪 90 年 代 后 期 的 程序 员 们 提起 “DHTML”， 你 将 很 难 让 他 们 相信 
它 现在 已 经 变 成 了 一 种 简单 、 易 用 的 标准 化 技术 。 


DHTML 曾 被 认为 是 HTML/XHTML、CSS 和 JavaScript 相 结合 的 产物 ， 就 
像 今 天 的 HTML5 那 样 ， 但 把 这 些 东 西 真 正 凝 聚 在 一 起 的 是 DOM。 如 果 
真 的 需要 来 描述 这 一 过 程 的 话 ，“DOM 脚 本 程序 设计 ”更 精确 ， 它 表示 

使 用 W3C DOM 来 处 理 文档 和 样式 表 。DHTML 只 适用 于 Web 文 

档 ，“DOM 脚 本 程序 设计 ” 则 涵盖 了 使 用 任何 一 种 支持 DOM API 的 程序 

设计 语言 去 处 理 任 何 一 种 标记 文档 的 情况 。 有 具体 到 Web 文 档 ，JavaScript 
的 无 所 不 在 使 它 成 为 了 DOM 肢 本 程序 设计 的 最 佳 选择 。 


在 正式 介绍 DOM 脚 本 程序 设计 技巧 之 前 ， 我 们 将 在 下 一 章 先 简要 地 复 
习 一 下 JavaScript 的 语法 。 
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要 复习 一 下 JavaScript 语 法 ， 并 介绍 其 中 最 重要 的 一 些 概念 。 


IH 


— 


2.1 准备 工作 


编写 JavaScript 脚 本 不 需要 任何 特殊 的 软件 ， 一 个 普通 的 文本 编辑 器 和 一 
个 Web 浏 览 器 就 足够 了 了。 


用 JavaScript 编 写 的 代码 必须 通过 HTML/XHTML 文 档 才 能 执行 。 有 两 种 
方式 可 以 做 到 这 点 。 第 一 种 方式 是 将 JavaScript 代 码 放 到 文档 <head> 标 
签 中 的 <script> 标签 之 间 : 


<!DOCTYPE html > 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
<script> 
JavaScript goes here... 
</script> 
</head> 
<body> 
Mark-up goes here... 
</body> 
</html> 





一 种 更 好 的 方式 是 把 JavaScript 代 码 存 为 一 个 扩展 名 为 js 的 独立 文件 。 
典型 的 作法 是 在 文档 的 <head> 部 分 放 一 个 <script> 标签 ， 并 把 它 的 
src 属性 指向 该 文件 : 





<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
<script src="file.js"></script> 
</head> 
<body> 
Mark-up goes here... 
</body> 
</html> 


| 


a 签 放 到 HTML 文 档 的 最 后 ，</body> br 
签 之 前 : 


<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
</head> 
<body> 


Mark-up goes here... 

<script src="file.js"></script> 
</body> 
</html> 





这 样 能 使 浏览 器 更 快 地 加 载 页 面 〈 第 5 草 将 详细 讨论 这 个 问题 ) 。 


注意 前面 例子 中 的 <script> 标签 没有 包含 传统 的 
type-"text/javascript" 属性 。 因 为 脚本 默认 是 Java Script, Pr 
以 没 必 要 指定 这 个 属性 。 


如 条 打算 实践 一 下 本 章 中 的 例子 ， 用 一 个 文本 编辑 器 创建 两 个 文件 。 先 
创建 一 个 简单 的 HTML 或 XHTML 文 件 ， 保 存 为 诸如 test.html 之 类 的 
名 称 。 A 定 要 包含 一 个 <script> 标签 ， 这 个 标签 的 src 属 
性 设置 成 你 创建 的 第 二 个 文件 的 名 字 ， 比 如 example.js。 


你 的 test .html 文件 应 该 包含 如 下 内 容 : 





<!DOCTYPE html > 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
«title»Just a test</title> 
«/head» 
«body» 


<script src="example.js"></script> 
</body> 
</html> 





可 以 把 本 章 中 的 任何 一 个 示例 复制 到 你 的 example.Jjs 文件 中 。 虽 说 那 
md 但 它们 可 以 把 有 关 的 语法 演示 得 
明明 白白 。 





在 本 书后 面 的 章节 里 ， 我 们 将 演示 如 何 使 用 JavaScript 改 变 文 档 的 行为 和 
内 容 。 但 在 本 音 里 ， 我 们 只 使 用 一 个 简单 的 对 话 框 来 显示 消 妃 。 


如 果 改 变 了 example.js 文件 的 内 容 ， 只 需 在 Web 浏 览 右 中 重新 载 
入 test.html 文档 即 可 看 到 效果 。Web 浏 览 器 会 立刻 解释 并 执行 你 的 
JavaScript 代 码 。 


程序 设计 语言 分 为 解释 型 和 编译 型 两 大 类 。Java 或 C++ 等 语言 需要 一 个 
编译 器 (compiler) 。 编 译 器 是 一 种 程序 ， 能 够 把 用 Java 等 高 级 语言 编 
写 出 来 的 源 代 码 翻 译 为 直接 在 计算 机 上 执行 的 文件 。 


解释 型 程序 设计 语言 不 需要 编译 妖 它们 仅 需 要 解释 器 。 对 于 
JavaScript 语 言 ， 在 互联 网 环境 下 ，Web 浏 览 占 负责 完成 有 关 的 解释 和 执 
行 工作 。 浏 览 器 中 的 JavaScript 解 释 器 将 直接 读 入 源 代 码 并 执行 。 浏 览 器 
中 如 果 没 有 解释 器 ，JavaScript 代 人 码 就 无 法 执行 。 


用 编译 型 语言 编写 的 代码 有 错误 ， 这 些 错误 在 代码 编译 阶段 就 能 梓 发 
现 。 而 解释 型 语言 代码 中 的 错误 只 能 等 到 解释 占 执 行 到 有 关 代 码 时 才能 
被 发 现 。 

与 解释 型 语言 相 比 ， 编 译 型 语言 往往 速度 更 快 ， 可 移植 性 更 好 ， 但 它们 
的 学 习 曲 线 也 往往 相当 陡峭 。 

JavaScript 的 优点 之 一 就 是 相当 容易 入 门 ， 但 千 万 不 要 因此 小 看 


JavaScript， 其 实 它 能 完成 许多 相当 复杂 的 编程 任务 。 不 过 ， 本 章 主 要 介 
绍 它 最 基本 的 语法 和 用 法 。 














2.2 ”语法 


英语 是 一 种 解释 型 语言 。 在 阅读 和 处 理 我 们 用 英语 写 出 来 的 文字 时 ， 你 
就 相当 于 一 个 英语 解释 器 。 只 要 遵守 英语 的 语法 规则 ， 我 们 想 表达 的 意 
思 就 可 以 被 正确 地 解读 。 这 些 语言 结构 方面 的 各 项 规则 ， 我 们 就 称 之 

为 “语法 ”。 


如 同 书面 的 人 类 语言 ， 每 种 程序 设计 语言 也 都 有 上 自己 的 语法 。JavaScript 
的 语法 与 Java 和 C++ 语言 的 语法 非常 相似 。 








2.2.1 语句 


用 JavaScript 编 写 的 脚本 ， 与 其 他 语言 编写 出 来 的 脚本 一 样 ， 都 由 一 系列 
指令 构成 ， 这 些 指令 叫做 语句 (statement) 。 只 有 按照 正确 的 语法 编写 
出 来 的 语句 才能 得 到 正确 的 解释 。 


人 它们 是 构成 任何 一 个 脚本 的 基本 
Mo 


英语 语法 要 求 每 个 句子 必须 以 一 个 大 写字 母 开 头 、 以 一 个 句号 结尾 。 
JavaScript 在 这 方面 的 要 求 不 那么 严格 ， 程 序 员 只 需 简 单 地 把 各 条 语句 放 
在 不 同 的 行 上 就 可 以 分 隅 它们 ， 如 下 所 示 : 


first statement 
second statement 





如 果 你 想 把 多 条 语句 放 在 同一 行 上 ， 就 必须 像 下 面 这 样 用 分 号 来 分 隅 开 
eM: 


first statement; second statement; 





我 们 建议 在 每 条 语句 的 末尾 都 加 上 一 个 分 号 ， 这 是 一 种 良好 的 编程 习 


J 
D: 


first statement; 


second statement; 





这 样 做 让 代码 更 容易 阅读 。 让 每 条 语句 独占 一 行 的 做 法 能 更 容易 跟踪 
JavaScript 脚 本 的 执行 顺序 。 
2.2.2 ”注释 


不 是 所 有 的 语句 都 需要 JavaScript 解 释 器 去 解释 并 执行 。 有 了 时 你 需要 在 脚 
本 中 写 一 些 仅 供 自己 参考 或 提醒 自己 的 信息 ， 你 希望 JavaScript 解 释 器 能 
直接 忽略 掉 这 些 信 息 。 这 类 语句 就 是 注释 (comment) . 


注释 能 有 效 帮助 你 了 解 代码 流程 。 在 代码 中 它们 扮演 生活 中 便条 的 角 
色 ， 可 以 帮助 你 弄 清楚 你 的 脚本 到 底 干 了 些 什么 。 


有 多 种 方式 可 以 在 JavaScript 脚 本 中 插入 注释 。 例 如 ， 如 果 用 两 个 笠 线 作 
为 一 行 的 开始 ， 这 一 行 就 会 被 当成 一 条 注释 : 











如 琳 使 用 这 种 注释 方式 ， 就 必须 在 每 个 注释 行 的 开头 加 上 两 个 和 斜 线 。 像 
下 面 这 样 的 写法 脚本 就 会 出 问题 : 


提醒 : 
有 注释 是 好 事 











必须 把 它们 写成 类 似 下 面 这 样 才 行 : 


// 自我 提醒 : 
// 有 注释 是 好 事 











如 果 打 算 注 释 很 多 行 ， 你 可 以 在 注释 内 容 的 开头 加 上 一 个 斜 线 和 一 个 星 
5 (/*) ， 在 注释 内 容 的 末尾 加 上 一 个 星 号 和 一 个 笠 线 〈*/ ) 。 下 面 
是 一 个 多 行 注释 的 例子 : 


/* 自我 提醒 : 
有 注释 是 好 事 */ 














这 各 注释 方 式 在 需要 考 入 大 让 注释 时 很 有 用 ， 它 可 以 提高 整个 风 本 的 可 
读 性 。 


还 可 以 使 用 HTML 风 格 的 注释 ， 但 这 种 做 法 仅 适 用 于 单行 注释 。 其 实 
JavaScript 解 释 器 对 “<1-- ”的 处 理 与 对 “// ”的 处 理 是 一 样 的 : 





<!-- 这 是 JavaScript 4 











如 果 是 在 HIML 文 档 中 ， 还 需要 以 “- -> ”来 结束 注释 ， 如 下 所 示 : 


<!-- 这 是 HTML 中 的 注释 --> 








但 JavaScript 不 要 求 这 样 做 ， 它 会 把 *- -> ” 视 为 注释 内 容 的 一 部 分 。 


请 注意 ，HIML 人 允许 上 面 这 样 的 注释 跨越 多 个 行 ， 但 JavaScript 要 求 这 种 
注释 的 每 行 都 必须 在 开头 加 上 “<!-- ”来 作为 标志 。 


因为 JavaScript 解 释 器 在 处 理 这 种 风格 的 注释 时 与 大 家 所 熟悉 的 HTML 做 


法 不 同 ， 为 避免 发 生 混 消 ， 最 好 不 要 在 JavaScript 脚 本 中 使 用 这 种 风格 的 
注释 。 建 议 大 家 用 “// ”来 注释 单行 ， 用 “/* ”注释 多 行 。 


2.2.3 ”变量 


在 日 常生 活 里 ， 有 些 东西 是 固定 不 变 的 ， 有 些 东 西 则 会 发 生变 化 。 例 
如 ， 人 的 姓名 和 生日 是 固定 不 变 的 ， 但 心情 和 年 龄 却 会 随 着 时 间 变 化 而 
变化 。 人 们 把 那些 会 发 生变 化 的 东西 称 为 变量 (variable)。 


我 的 心情 会 随 着 我 的 感受 变化 而 变化 。 假 设 我 有 一 个 变量 mood (意思 
是 “心情 ”) ， 我 可 以 把 此 时 此 刻 的 心情 存放 到 这 个 变量 中 。 不 管 这 个 变 
量 的 值 是 “happy” 还 是 “sad”， 它 的 名 字 始 终 是 mood 。 我 可 以 随时 改变 这 
个 值 。 











类 似 地 ， 假 设 我 现在 的 年 龄 是 33 岁 。 一 年 之 后 ， 我 的 年 龄 就 是 34 岁 。 我 
可 以 使 用 变量 age 来 存放 我 的 年 龄 并 在 生日 那天 改变 这 个 值 。 当 我 现在 
去 碍 看 age 变量 时 ， 它 的 值 是 33， 但 一 年 之 后 ， 它 的 值 将 变 成 34。 


把 值 存 入 变量 的 操作 称 为 赋值 〈assignment) 。 我 把 变量 mood 赋值 
为 “happy”， 把 变量 age 赋值 为 33。 


在 JavaScript 中 你 可 以 这 样 给 这 些 变量 赋值 : 





mood = "happy"; 
age = 33; 








一 个 变量 被 赋值 以 后 ， 我 们 就 说 该 变量 包含 这 个 值 。 变 量 mood 现在 包 
含 值 happy”， 变 量 age 现在 包含 值 33。 我 们 可 以 用 如 下 所 示 的 语句 把 
这 两 个 变量 的 值 显示 在 一 个 弹出 式 警 告 窗口 中 : 


alert(mood ) ; 
alert(age) ; 





图 2-1 是 一 个 显示 mood 变量 值 的 例子 。 


happy 





图 2-1 
图 2-2 是 一 个 显示 age 变量 值 的 例子 。 





图 2-2 
我 们 会 在 本 书后 面 的 章节 中 利用 变量 做 一 些 很 有 用 的 事情 ， 别 着 急 。 


请 注意 ， JavaScript 允 许 程序 员 直 接 对 变量 赋值 而 无 第 事先 声 明 。 这 在 许 
多 程序 设计 语言 2 0 有 很 多 语 言 要 求 在 使 用 任何 变量 之 前 DA 
须 先 对 它 做 出 “介绍 >”， 也 称 为 声明 (declare) 。 


在 JavaScript 脚 本 中 ， 如 果 程 序 员 在 对 某 个 变量 赋值 之 前 未 声明 ， 赋 值 操 
作 将 自动 声明 该 变量 。 虽 然 JavaScript 没 有 强制 要 求 程 序 员 必须 提前 声明 
变量 ， 但 提前 声明 变量 是 一 种 展 好 的 编程 习惯 。 下 面 的 语句 对 变量 mood 


























和 age 做 出 了 声明 : 











不 必 单独 声明 每 个 变量 ， 你 也 可 以 用 一 条 语句 一 次 声明 多 个 变量 : 


var mood, age; 





UE AA: 把 声明 变量 和 对 该 变量 赋值 一 次 完 


var mood = "happy"; 
var age = 33; 





甚至 还 可 以 像 下 面 这 样 : 


var mood = "happy", age = 33; 





像 上 面 这 样 声明 和 赋值 是 最 有 效率 的 做 法 ， 这 一 条 语句 的 效果 相当 于 下 
面 这 些 语句 的 总 和 : 


var mood, age; 
mood = "happy"; 
age = 33; 








在 JavaScript 语 言 里 ， 变 量 和 其 他 语法 元 素 的 名 字 都 是 区 分 字母 大 小 写 








的 。 名 字 是 mood 的 变量 与 名 字 是 Mood . MOOD 或 m00d 的 变量 没有 任何 
Tm 它们 不 是 同一 个 变量 。 下 面 的 语句 是 在 对 两 个 不 同 的 变量 进行 赋 


var mood = "happy"; 
MOOD = "sad"; 














JavaScript 语 法 不 允许 变量 名 中 包含 空格 或 标点 符号 〈 美 元 符号 “$ Pl 
Sh) 。 下 面 这 条 语句 将 导致 语法 错误 : 


var my mood = "happy"; 


JavaScript 变 量 名 允许 包含 字母 、 数 字 、 美 元 符号 和 下 划 线 (但 第 一 个 字 
符 不 允许 是 数字 ) 。 为 了 让 比较 长 的 变量 名 更 容易 阅读 ， 可 以 在 变量 名 
中 的 适当 位 置 插入 下 划 线 ， 就 像 下 面 这 样 : 














var my_mood = "happy"; 


另 一 种 方式 是 使 用 驼峰 格式 (camel case)， 删 除 中 间 的 空白 〈 下 划 线 ) , 
后 面 的 每 个 新 单词 改 用 大 写字 母 开 头 : 


var myMood = "happy"; 


通常 驼峰 格式 是 函数 名 、 方 法 名 和 对 象 属性 名 命名 的 首选 格式 。 


在 上 面 这 条 语句 中 ， 单 词 “<happy” 是 JavaScript 语 言 中 的 一 个 字面 量 
(literal) ， 也 就 是 可 以 直接 在 JavaScript 代 码 中 写 出 来 的 数据 。 文 
本 “happy” 除 了 表示 它 自 己 以 外 不 表示 任何 别 的 东西 ， 正 如 大 力 水 手 














Popeye 4a: “Cmte! ”与 此 形成 对 照 的 是 ， 单 词 “var” 是 一 个 关键 
字 ，my_mood 是 一 个 变量 名 字 。 


2.2.4 数据 类 型 


变量 mood 的 值 是 一 个 字符 串 ， 变 量 age 的 值 则 是 一 个 数 。 虽 然 它 们 是 
两 种 不 同类 型 的 数据 ， 但 在 JavaScript 中 对 这 两 个 变量 进行 声明 和 赋值 的 
语法 却 完 全 一 样 。 有 些 其 他 的 语言 要 求 在 声明 变量 的 同时 还 必须 同时 声 
明 变 量 的 数据 类 型 ， 这 种 做 法 称 为 类 型 声明 (typing) 。 

必须 明确 类 型 声明 的 语言 称 为 强 类 型 (strongly typed) 语言 。 
JavaScript 不 需要 进行 类 型 声明 ， 因 此 它 是 一 种 弱 类 型 (weakly typed) 
语言 。 这 意味 着 程序 员 可 以 在 任何 阶段 改变 变量 的 数据 类 型 。 


以 下 语句 在 强 类 型 语言 中 是 非法 的 ， 但 在 JavaScript 里 却 完全 没有 问题 : 











var age = "thirty three"; 
age - 33; 





JavaScript 并 不 在 意 变量 age 的 值 是 一 个 字符 串 还 是 一 个 数 。 
接 下 来 ， 我 们 一 起 来 复习 一 下 JavaScript 中 最 重要 的 几 种 数据 类 型 。 


01. 字符 串 











字符 串 由 零 个 或 多 个 字符 构成 。 字 符 包括 〈 但 不 限于 ) 字母 、 数 
字 、 标 点 符号 和 空格 。 字 符 串 必须 包 在 引号 里 ， 单 引号 或 双 引号 都 
可 以 。 下 面 这 两 条 语句 含义 完全 相同 ; 














你 可 以 随意 选用 引号 ， 但 最 好 是 根据 字符 串 所 包含 的 字符 来 选择 。 


CUR ETT ER LOSS ITE SEB CE S| SE; WR 
串 包 含 单 引号 ， 就 把 整个 字符 串 放 在 双 引 号 里 : 


var mood = "don't ask"; 





WREE EIR RTE A) EPS], UZ RUE SE BE” A? 2 
间 的 单 引 号 能 被 当成 这 个 字符 串 的 一 部 分 。 这 种 情况 下 这 个 单 引 号 
需要 被 看 做 一 个 普通 字符 ， 而 不 是 这 个 字符 串 的 结束 标志 。 这 种 情 
况 我 们 需要 对 这 个 字符 进行 转 义 (escaping) 。 在 JavaScript 里 用 反 
笠 线 对 字符 进行 转 义 : 








var mood = ‘don\'t ask'; 








FAH, WAR AA S| SOR LE 71 AS EE SS ET 
WAM FI RR BOT FITE P US] XE E XL 


var height = "about 5'10\" tall"; 








实际 上 这 些 反 和 斜 线 并 不 是 字符 串 的 一 部 分 。 你 可 以 目 己 去 验证 一 
下 : 把 下 面 这 段 代码 添加 到 你 的 example.js 文件 中 ， 然 后 重新 加 
载 test .html 文件 : 


var height = "about 5'10\" tall"; 
alert(height) ; 





图 2-3 是 用 反 斜 线 对 有 关 字 符 转 义 的 一 个 屏幕 输出 示例 。 


02. 


about 5'10" tall 





图 2-3 

我 个 人 比较 喜欢 用 双 引 号 来 包 住 字符 串 。 作 为 一 个 好 的 编程 习惯 ， 
不 管 选 择 用 双 引 号 还 是 单 引 号 ， 请 在 整个 脚本 中 保持 一 致 。 如 果 在 
同一 个 脚本 中 一 会 儿 使 用 双 引 号 ， 一 会 儿 又 使 用 单 引 号 ， 代 码 很 快 
就 会 变 得 难以 阅读 和 理解 。 

数值 

如 果 想 给 一 个 变量 赋 一 个 数值 ， 不 用 限定 它 必须 是 一 个 整数 。 


JavaScript 允 许 使 用 之 小 数 点 的 数值 ， 并 且 允 许 任 意 位 小 数 ， 这 样 的 
数 称 为 浮 点 数 (floating-point number) : 


var age = 33.25; 


也 可 以 使 用 负数 。 在 有 关 数 值 的 前 面 加 上 一 个 减 号 〈-) 表示 它 是 


一 个 负数 : 


var temperature = -20; 


JavaScript 也 文 持 负数 序 点 数 : 


var temperature = -20.33333333 








03. 


以 上 是 数值 数据 类 型 的 例子 。 

布尔 值 

另 一 种 重要 的 数据 类 型 是 布尔 (boolean) 类 型 。 

布尔 数据 只 有 两 个 可 选 值 一 true 或 false 。 假 设 需要 这 样 一 个 

变量 : 如 果 我 正在 睡觉 ， 这 个 变量 将 存储 一 个 值 ， 如 果 我 没有 睡 
这 个 变量 将 存储 男 一 个 值 。 可 以 用 字符 串 数据 类 型 把 变量 赋值 


"Ws 
为 “sleeping” 或 “not sleeping”， 但 使 用 布尔 数据 类 型 显然 是 一 个 更 好 
J 选择 : 











var sleeping = true; 








从 茶 种 意义 上 讲 ， 为 计算 机 设计 程序 就 是 与 布尔 值 打交道 。 作 为 最 
基本 的 事实 ， 所 有 的 电子 电路 只 能 识别 和 使 用 布尔 数据 : 电路 中 有 
电流 或 是 没有 电流 。 不 管 是 使 用 术语 true 和 false. yes 和 no 或 者 1 和 
0， 重 要 的 是 只 能 取 两 种 可 取 值 中 的 一 种 。 


布尔 值 不 是 字符 串 ， 千 万 不 要 把 布尔 值 用 引号 括 起 来 。 布 尔 
值 false 与 字符 串 值 "false" 是 两 码 事 ! 


下 面 这 条 语句 将 把 变量 married 设置 为 布尔 值 true : 


var married = true; 


下 面 这 条 语句 把 变量 married 设置 为 字符 串 ”true ”: 


var married = "true"; 


2.2.55 ”数组 


字符 串 、 数 值 和 布尔 值 都 是 标量 〈scalar) 。 如 果 某 个 变量 是 标量 ， 它 
在 任意 时 刻 就 只 能 有 一 个 值 。 如 果 想 用 一 个 变量 来 存储 一 组 值 ， 就 需要 
使 用 数组 (array) 。 


数组 是 指 用 一 个 变量 表示 一 个 值 的 集合 ， 集 合 中 的 每 个 值 都 是 这 个 数组 


的 一 个 元 素 CelemenO 。 例 如 ， 我 们 可 以 用 名 为 beatles 的 变量 来 保 
存 Beatles 乐 队 全 体 四 位 成 员 的 姓名 。 


在 JavaScript 中 ， 数 组 可 以 用 关键 字 Array 声明 。 声 明 数 组 的 同时 还 可 以 
站 定 数组 初始 元 素 个 数 ， 也 就 是 这 个 数组 的 长 上 度 Cength) : 


var beatles = Array(4); 


有 时 ， 我 们 无 法 预知 某 个 数组 有 多 少 个 元 素 。 没 有 关系 ，JavaScript 根 本 
不 要 求 在 声明 数组 时 必须 给 出 元 系 个 数 ， 我 们 完全 可 以 在 声明 数组 时 不 
给 出 元 素 个 数 : 


var beatles = Array(); 


向 数组 中 添加 元 素 的 操作 称 为 填充 (populating) 。 在 填充 数组 时 ， 不 
仅 需 要 给 出 新 元 系 的 值 ， 还 需要 给 出 新 元 素 在 数组 中 的 存放 位 置 ， 这 个 
位 置 就 是 这 个 元 素 的 下 标 (index) 。 数 组 里 一 个 元 素 一 个 下 标 。 下 标 
必须 用 方 括号 括 起 来 : 


array[index] = element; 




















现在 来 填充 刚才 声明 的 beatles 数组 ， a AM 的 传统 
顺序 〈 即 John、Paul、George 和 Ringo) 进行 填充 。 ^: 


beatles[0] = "John"; 





用 0 而 不 是 1 作为 第 一 个 下 标 多 少 会 让 人 感到 有 些 不 习惯 ， 这 是 JavaScript 
世界 里 的 一 条 规则 ， 所 以 我 们 只 能 这 么 做 。 人 们 很 容易 怎 记 这 一 点 ， 很 
多 程序 员 新 手 在 刚 接触 数组 时 经 常 在 这 个 问题 上 犯错 误 。 


下 面 是 声明 和 填充 beatles 数组 的 全 过 程 : 


var beatles = Array(4); 
beatles[0] "John"; 
beatles[1] "Paul"; 
beatles[2] "George"; 
beatles[3] "Ringo"; 





我 们 现在 可 以 在 脚本 中 通过 下 标 值 *2”(beatles[2] ) 来 获取 元 

% “George” Jo WIE, beatles 数组 的 长 度 是 4， 但 它 最 后 一 个 元 素 
的 下 标 却 是 3。 因 为 数组 下 标 是 从 0 开始 计数 的 ， 你 或 许 需 要 一 些 时 间 才 
能 习惯 这 一 事实 。 


像 上 面 这 样 填充 数组 未 免 有 些 麻 烦 。 有 一 种 相对 简单 的 方式 ， 在 声明 数 
组 的 同时 对 它 进行 填充 。 这 种 方式 要 求 用 逗 写 把 各 个 元 系 阳 开 : 

















var beatles = Array( "John", "Paul", "George", "Ringo" ); 











上 面 这 条 语句 会 为 每 个 元 素 上 自动 分 配 一 个 下 标 : 第 一 个 下 标 是 0， 第 二 
依次 类 推 。 因 此 ，beatles[2] 仍 将 对 应 于 取 值 为 “George” 的 元 


我 们 甚至 用 不 着 明确 地 表明 我 们 是 在 创建 数组 。 事 实 上 ， 只 需 用 一 对 方 
括号 把 各 个 元 系 的 初始 值 括 起 来 融 可 以 了 : 


var beatles = [ "John", "Paul", "George", "Ringo" ]; 





BATT A DAE ee FFT PY AE EE i AP, ET 
把 一 组 数值 存 入 一 个 数组 : 


var years = [ 1940, 1941, 1942, 1943 ]; 





甚至 可 以 把 这 3 种 数据 类 型 混在 一 起 存 入 一 个 数组 : 


var lennon = [ "John", 1940, false ]; 








数组 元 素 还 可 以 是 变量 : 


var name = "John"; 
beatles[@] = name; 





这 将 把 beatles 数组 的 第 一 个 元 素 赋 值 为 "John”。 


数组 元 素 的 值 还 可 以 是 另 一 个 数组 的 元 素 。 下 面 两 条 语句 将 把 beatles 
数组 的 第 二 个 元 素 赋值 为 “Paul”: 





var names = [ "Ringo", "John", "George", "Paul" ]; 
beatles[1] = names[3]; 





事实 上 ， 数 组 还 可 以 包含 其 他 的 数组 ! 数组 中 的 任何 一 个 元 素 都 可 以 把 
一 个 数组 作为 它 的 值 : 


var lennon = [ "John", 1940, false ]; 
var beatles = []; 
beatles[@] = lennon; 





HVE, beatles 数组 的 第 一 个 元 素 的 值 是 另外 一 个 数组 。 要 想 获得 那个 
数组 里 的 某 个 元 素 的 值 ， 需 要 使 用 更 多 的 方 括 号 。beatles[6][68] 的 
值 是 “John”，beatles[8][1] 的 值 是 1940，beatles[8][2] 的 值 

是 false 。 


这 和 古 一 种 功能 相当 强大 的 存储 和 获取 信息 的 方式 ， 但 如 果 不 得 不 记 住 每 


个 下 标 数 字 的 话 《〈 尤 其 是 需要 从 零 开始 数 的 时 候 ) ， 编 程 工作 将 是 一 种 
非常 痛 藻 和 麻 焕 的 体验 。 柱 好 还 有 儿 种 办 法 可 以 填充 数组 。 痛 先 看 看 一 




















种 更 可 读 的 填充 数组 的 方式 ， 然 后 介绍 存放 数据 的 首选 方式 : 将 数据 保 
存 为 对 象 。 
关联 数组 
beatles 数组 是 传统 数组 的 典型 例子 ， 每 个 元 系 的 下 标 是 一 个 数字 ， 每 
增加 一 个 元 素 ， 这 个 数字 就 依次 增加 1。 第 一 个 元 素 的 下 标 是 0， 第 二 个 





元 素 的 下 标 是 1， 依 次 类 推 。 


如 果 在 填充 数组 时 只 给 出 了 元 系 的 值 ， 这 个 数组 就 将 是 一 个 传统 数组 ， 
它 的 各 个 元 系 的 下 标 将 被 目 动 创建 和 刷新 。 


可 以 通过 在 填充 数组 时 为 每 个 新 元 系 明 确 地 给 出 下 标 来 改变 这 种 默认 的 
行为 。 企 为 新 元 素 给 出 下 标 时 ， 个 必 局 限于 使 用 整数 数字 。 你 可 以 用 子 





var lennon = Array(); 
lennon["name"] = "John"; 
lennon["year"] - 1940; 
lennon["living"] - false; 


[L CR 


这 样 的 数组 叫做 关联 数组 。 由 于 可 以 使 用 字符 串 来 代替 数字 值 ， 因 而 
代码 更 具有 可 读 性 。 但 是 ， 这 种 用 法 并 不 是 一 个 好 习惯 ， 不 推荐 大 家 使 
用 。 本 质 上 ， 在 创建 关联 数组 时 ， 你 创建 的 是 Array 对 象 的 属性 。 在 
JavaScript 中 ， 所 有 的 变量 实际 上 都 是 某 种 类 型 的 对 象 。 比 如 ， 一 个 布尔 
值 就 是 一 个 Boolean 类 型 的 对 象 ， 一 个 数组 就 是 一 个 Array 类 型 的 对 象 。 
在 上 面 这 个 例子 中 ， 你 实际 上 是 给 lennon 数组 添加 了 name 、year 和 
living 三 个 属性 。 理 想 情况 下 ， 你 不 应 该 修改 Array 对 象 的 属性 ， 而 应 
该 使 用 通用 的 对 象 (0bject ) 。 


2.2.6 wR 
与 数组 类 似 ， 对 象 也 是 使 用 一 个 名 字 表 示 一 组 值 。 对 象 的 每 个 值 都 是 对 
2 CSS 例如 ， 前 一 节 的 lennon 数组 也 可 以 创建 成 下 面 这 个 对 


var lennon = Object(); 
lennon.name = "John"; 
lennon.year = 1940; 


lennon.living = false; 





与 使 用 Array 类 似 ， 创 建 对 象 使 用 Object 关键 字 。 它 不 使 用 方 括 号 和 下 
标 来 获取 元 素 ， 而 是 像 任何 JavaScript 对 象 一 样 ， 使 用 点 号 来 获取 属性 。 
要 了 解 与 Object 有 关 的 更 多 内 容 ， 请 参考 本 章 2.7 节 。 


创建 对 象 人 还 有 一 种 更 简洁 的 语法 ， 即 花 括 号 语法 : 


{ propertyName:value, propertyName:value } 


than, lennon 对 象 也 可 以 写成 下 面 这 样 : 














var lennon = { name:"John", year:1940, living:false }; 


pT 


属性 名 与 JavaScript 变 量 的 命名 规则 有 相同 之 处 ， 属 性 值 可 以 是 任何 
JavaScript 值 ， 包 括 其 他 对 象 。 


用 对 象 来 代 答 传统 数组 的 做 法 意味 痢 可 以 通过 元 素 的 名 字 而 不 是 下 标 数 
字 来 引用 它们 。 这 大 大 提高 了 脚本 的 可 读 性 。 


下 面 ， 我 们 将 创建 一 个 新 的 beatles 数组 ， 并 用 刚才 创建 的 Ilennon 对 
象 来 填充 它 的 第 一 个 元 素 。 











var beatles = Array(); 
beatles[@] = lennon; 











现在 ， 不 需要 使 用 那么 多 数 就 可 以 获得 想 要 的 元 素 。 我 们 不 能 使 
Hibeatles[e][e] 而 是 使 用 beatles[0].name 442) {4 “John”. 


在 此 基础 上 ， 还 可 以 做 进一步 的 改进 : 把 beatles 数组 也 声明 为 对 象 而 
不 是 传统 数组 。 这 样 一 来 ， 我 们 就 可 以 用 “drummer” 或 “bassist” 等 更 有 意 
义 且 更 容易 记忆 的 字符 串 值 一 一 而 不 是 一 些 枯燥 乏味 的 整数 作为 下 
标 去 访问 这 个 数组 里 的 元 素 了 : 








var beatles = {}; 


beatles.vocalist = lennon; 





现在 ，beatles .vocalist.name 的 值 
Jé*John", beatles.vocalist.year 的 值 是 
1940, beatles.vocalist. living 的 值 是 false。 


2.3 操作 


此 前 给 出 的 示例 都 非常 简单 ， 只 是 创建 了 一 些 不 同类 型 的 变量 而 已 。 要 
用 JavaScript 做 一 些 有 用 的 工作 ， 还 需要 能 够 进行 计算 和 处 理 数据 。 也 就 


是 需要 完成 一 些 操作 Coperation) 。 
算术 操作 符 


加 法 是 一 种 操作 ， 减 法 、 除 法 和 乘法 了 也是。 这些 算术 操作 Carithmetic 

operation) 中 的 每 一 种 都 必须 借助 于 相应 的 操作 符 Coperator) 才能 完 

成 。 操 作 符 是 JavaScript 为 完成 各 种 操作 而 定义 的 一 些 符号 。 你 其 实 已 经 
见 过 一 种 操作 符 了 ， 它 就 是 刚才 在 进行 赋值 时 使 用 的 等 号 C=) 。 加 法 
操作 符 是 加 号 (+) ， 减 法 操作 符 是 减 号 〈- ) ， 除 法 操作 符 是 斜 杜 (/ 
) ， 乘 法 操作 符 是 星 号 CO. 


下 面 是 一 个 简单 的 加 法 操作 : 





1+4 


还 可 以 把 多 种 操作 组 合 在 一 起 : 


为 避免 产生 歧义 ， 可 以 用 括号 把 不 同 的 操作 分 隔 开 来 : 





变量 可 以 包含 操作 : 


var total = (1 + 4) * 5; 


不 仅 如 此 ， 还 可 以 对 变量 进行 操作 : 





var temp_fahrenheit = 95; 
var temp_celsius = (temp_fahrenheit - 32) / 1.8; 





JavaScript 还 提供 了 一 些 非常 有 用 的 操作 符 作 为 各 种 常用 操作 的 缩写 。 例 
如 ， 如 果 想 给 一 个 数值 变量 加 上 1， 可 以 使 用 如 下 所 示 的 语句 : 


也 可 以 使 用 ++ 操作 符 来 达到 同样 的 目的 : 


year++; 


类 似 地 ，-- 操作 符 将 对 一 个 数值 变量 的 值 进行 减 1 操 作 。 


加 号 〈+ ) 是 一 个 比较 特殊 的 操作 符 ， 它 既 可 以 用 于 数值 ， 也 可 以 用 于 
字符 串 。 把 两 个 字符 串 合 二 为 一 十 一 种 很 直观 易 懂 的 操作 : 





var message = "I am feeling " + "happy"; 





像 这 样 把 多 个 字符 串 首 尾 相连 在 一 起 的 操作 叫做 拼接 
(concatenation) 。 这 种 拼接 也 可 以 通过 变量 来 完成 : 





var mood = "happy"; 
var message = "I am feeling " + mood; 





甚至 可 以 把 数值 和 字符 串 拼 接 在 一 起 。 因 为 JavaScript 是 一 种 弱 类 型 语 
言 ， 所 以 这 种 操作 是 允许 的 。 此 时 ， 数 值 将 被 自动 转换 为 字符 串 : 


var year = 2005; 
var message = "The year is ”+ year; 





请 记 住 ， 如 采 把 字符 串 和 数值 拼接 在 一 起 ， 其 结果 将 是 一 个 更 长 的 字符 
tB. 但 如 果 用 同样 的 操作 符 来 “拼接 ”两 个 数值 ， 其 结果 将 是 那 两 个 数值 
的 算术 和 。 请 对 比 下 面 两 条 alert 语句 的 执行 结果 : 





alert ("10" + 20); 
alert (10 + 20); 





第 一 条 alert 语句 将 返回 字符 串 "1626" ， 第 二 条 alert 语句 将 返回 数 
值 30。 


图 2-4 是 对 字符 串 "16"” 和 数值 20 进 行 拼 接 的 结 








图 2-4 
图 2-5 是 对 数值 10 和 数值 20 进 行 加 法 运算 的 结 





图 2-5 


另 一 个 非常 有 用 的 快捷 操作 符 是 += ， 它 可 以 一 次 完成 “< 加 法 和 赋 
值 ”〈 或 “拼接 和 赋值 >) 操作 : 
var year = 2010; 


var message = "The year is "; 
message += year; 





执行 完 上 面 这 些 语 名 后， 变量 message 的 值 将 是 “The year is 2010". PJ 
以 用 如 下 所 示 的 alert 对 话 框 来 验证 这 一 结果 : 


alert(message); 


这 次 对 字符 串 和 数值 进行 拼接 操作 的 结果 如 图 2-6 所 示 。 





The year is 2010 


onem) 


2.4 ”条件 语句 


此 前 介绍 的 语句 都 是 相对 比较 简单 的 声明 或 运算 ， 而 脚本 的 真正 威力 体 
现在 它们 还 可 以 根据 人 们 给 出 的 各 种 条 件 做 出 决策 。JavaScript 使 用 条 
件 语句 (conditional statement〉 来 做 判断 。 


在 解释 脚本 时 ， 浏 览 器 将 依次 执行 这 个 脚本 中 的 各 条 语句 ， 我 们 可 以 在 

这 个 脚本 中 用 条 件 语 句 来 设置 一 个 条 件 ， 只 有 满足 了 这 一 条 件 才能 让 更 

最 常见 的 条 件 语句 是 if 语句 ， 下 面 是 if 语句 的 基 
语法 : 





if (condition) { 
statements; 


} 





条 件 必须 放 在 if 后 面 的 圆 括号 中 。 条 件 的 求 值 结果 永远 是 一 个 布尔 
值 ， 即 只 能 是 true 或 false 。 人 花 括 号 中 的 语句 一 一 不 管 它们 有 多 少 
条 ， 只 有 在 给 定 条 件 的 求 值 结 果 是 true 的 情况 下 才 会 执行 。 因 此 ， 在 
下 面 这 个 例子 中 ，alert 消息 永远 也 不 会 出 现 : 





if (1 > 2) { 
alert("The world has gone mad!"); 


} 





因为 1 不 可 能 大 于 2， 所 以 上 和 面 这 个 条 件 的 值 永远 是 false 。 


在 这 条 if 语句 中 ， 我 们 有 意 把 所 有 的 东西 都 放 在 花 括号 里 的 。 这 并 不 
是 JavaScript 的 一 项 语法 要 求 ， 我 们 这 么 做 只 是 为 了 让 代码 更 容易 阅读 。 


事实 上 ，if 语句 中 的 花 括 写本 映 并 不 是 必 不 可 少 的 。 如 果 if 语句 中 的 
化 括号 部 分 只 包含 着 一 条 语句 的 话 ， 那 束 可 以 不 使 用 花 括号， 而 且 这 
条 if 语句 的 全 部 内 容 可 以 写 在 同一 行 上 : 














if (1 > 2) alert("The world has gone mad!"); 





不 过 ， 因 为 花 括 号 可 以 提高 脚本 的 可 读 性 ， 所 以 在 if 语句 中 总 是 使 用 
化 括号 是 个 好 习惯 。 


if 语句 可 以 有 一 个 else 子 句 。 包 含 在 else 子 句 中 的 语句 会 在 给 定 条 
件 为 假 时 执行 : 





if (1 > 2) { 
alert("The world has gone mad!"); 
} else { 
alert("All is well with the world"); 


} 





ea ed (false) ， 所 以 我 们 将 看 到 如 图 2-7 所 示 


All is well with the world 





图 2-7 
2.4.1 ”比较 操作 符 


JavaScript 还 提供 了 许多 几乎 只 能 用 在 条 件 语句 里 的 操作 符 ， 其 中 包括 诸 
如 大 于 C), DF C) 、 大 于 或 等 于 (>=) 、 小 于 或 等 于 (<=) 之 


类 的 比较 操作 符 。 


如 休想 比较 两 个 值 是 否 相 等 ， 可 以 使 用 "等 于 "比较 操作 符 。 这 个 操作 符 
由 两 个 等 号 构成 (==) 。 别 二 了 ， 单 个 等 号 〈=) 是 用 于 完成 赋值 操作 
的 。 如 采 在 条 件 语 句 的 茶 个 条 件 里 使 用 了 单个 等 号 ， 那 么 只 要 相应 的 赋 
值 操 作 取 得 成 功 ， 那 个 条 件 的 求 值 结果 就 将 是 true 。 


下 面 是 一 个 错误 地 进行 “等 于 ?比较 的 例子 : 





var my mood = "happy"; 

var your mood - "sad"; 

if (my mood = your mood) { 
alert("We both feel the same."); 


} 





上 面 这 条 语句 的 错误 之 处 在 于 ， 它 是 把 变量 your_mood 赋值 给 变量 
my_mood ， 而 不 是 在 比较 它们 是 否 相 等 。 因 为 这 个 赋值 操作 总 会 成 功 * 
， 所 以 这 个 条 件 语 句 的 结果 将 永远 是 true 。 























1 此 处 原文 有 误 ， 赋 值 运算 并 非 总 是 返回 真 值 : if(a = false) (alert('hello, 
world');} 中 的 alert 语句 就 不 会 执行 。 审 校 者 注 
































下 面 才 是 进行 “等 于 ”比较 的 正确 做 法 : 


var my mood = "happy"; 

var your mood - "sad"; 

if (my mood -- your mood) ( 
alert("We both feel the same."); 


} 





这 次 ， 条 件 语句 的 结果 是 false 。 


JavaScript 还 提供 了 一 个 用 来 进行 “不 等 于 ”比较 的 操作 符 ， 它 由 一 个 感叹 
号 和 一 个 等 号 构成 (=) 。 





if (my_mood != your_mood) { 
alert("We're feeling different moods."); 


} 





相等 操作 符 == 并 不 表示 严格 相等 ， 这 一 点 很 容易 让 人 犯 糊涂 。 例 如 ， 比 
较 false 与 一 个 空 字符 串 会 得 到 什么 结果 ? 





var a = false; 
var b = ""; 
if (a == b) ( 

alert("a equals b"); 
} 





这 个 条 件 语句 的 求 值 结 末 是 true ， 为 什么 ? 因为 相等 操作 符 == 认为 空 
字符 串 与 false 的 含义 相同 。 要 进行 严格 比较 ， 就 要 使 用 为 一 种 等 号 
(=== ) 。 这 个 全 等 操作 符 会 执行 严格 的 比较 ， 不 仅 比 较 值 ， 而 且 会 比 
较 变 量 的 类 型 : 


var a = false; 

var b = ""; 

if (a === b) ( 
alert("a equals b"); 


} 





这 一 次 ， 条 件 表达 式 的 求 值 结果 就 是 false 了 。 因 为 即使 可 以 认 
为 false 与 空 字符 串 具 有 相同 的 含义 ， 但 Boolean 和 String 可 不 是 一 种 类 
型 。 


当然 ， 对 于 不 等 操作 符 != 也 是 如 此 。 如 果 想 比较 严格 不 相等 ， 就 要 使 


[二 三 


2.4.2 ZIRE 


JavaScript 人 允许 把 条 件 语句 里 的 操作 组 合 在 一 起 。 例 如 ， 如 果 想 检查 某 个 
变量 ， 不 妨 假设 这 个 变量 的 名 字 是 num ， 它 的 值 是 不 是 在 5 一 10 之 间 ， 
我 将 需要 进行 两 次 比较 操作 。 首 先 ， 比 较 这 个 变量 是 否 大 于 或 等 于 5; 
然后 ， 比 较 这 个 变量 是 否 小 于 或 等 于 10。 这 两 次 比较 操作 称 为 逻辑 比较 
Coperand) 。 下 面 是 把 这 两 个 逻辑 比较 组 合 在 一 起 的 具体 做 法 : 





if ( num >= 5 && num <= 10 ) ( 
alert("The number is in the right range."); 





这 里 使 用 了 “ 远 辑 与 ”操作 符 ， 它 由 两 个 “&” 字 符 构成 (&&) n, EWE 
辑 操 作 符 。 


逻辑 操作 符 的 操作 对 象 是 布尔 值 。 每 个 逻辑 操作 数 返回 一 个 布尔 值 true 
或 者 是 false 。 “逻辑 与 ”操作 只 有 在 它 的 两 个 操作 数 都 是 true 时 才 会 


是 true 。 


“逻辑 或 ?操作 符 由 两 个 垂直 线 字符 构成 〈|| ) 。 只 要 它 的 操作 数 中 有 
一 个 是 true ，“ 逻 辑 或 "操作 就 将 是 true 。 如 果 它 的 两 个 操作 数 都 
是 true , “逻辑 或 ?操作 也 将 是 true 。 只 有 当 它 的 两 个 操作 数 都 

是 false 时 , “逻辑 或 ?操作 才 会 是 false 。 





if ( num > 10 || num « 5 ) ( 
alert("The number is not in the right range."); 


} 





JavaScript 还 提供 了 一 个 “逻辑 非 ? 操 作 符 ， 它 由 一 个 感叹 号 〈! ) 单独 构 
成 。“ 逮 辑 非 > 操 作 符 只 能 作用 于 单个 逻辑 操作 数 ， 其 结果 是 把 那个 逻辑 
操作 数 所 返回 的 布尔 值 取 反 。 如 果 那 个 逻辑 操作 数 所 返回 的 布尔 值 

是 true ,， “你 辑 非 ” 操 作 符 将 把 它 取 反 为 false : 


if ( !(1 > 2) ) { 
alert("All is well with the world"); 
} 


| 


请 注意 ， 为 避免 产生 歧义 ， 上 面 这 条 语句 把 馆 辑 操作 数 放 在 了 括号 里 ， 
因为 我 想 让 “逻辑 非 ? 操 作 符 作 用 于 括号 里 的 所 有 内 容 。 

可 以 用 “逻辑 非 ? 操 作 符 把 整个 条 件 语 句 的 结果 颠 倒 过 来 。 在 下 面 的 例子 
里 ， 我 特意 使 用 了 一 对 括号 来 确保 “ 巡 辑 非 ?操作 符 将 作用 于 两 个 逻辑 操 
作 数 的 组 合 结果 : 


if ( !(num > 10 || num « 5) ) { 
alert("The number IS in the right range."); 


} 





2.5 循环 语句 


if 语句 或 许 是 最 重要 、 最 有 用 的 条 件 语 名 了， 它 的 唯一 不 足 是 无 法 完 
成 重复 性 的 操作 。 在 if 语句 里 ， 包 含 在 花 括 号 里 的 代码 块 只 能 执行 一 
次 。 如 果 需 要 多 次 执行 同一 个 代码 块 ， 就 必须 使 用 循环 语句 。 


循环 语句 可 以 让 我 们 反复 多 次 地 执行 同一 段 代码 。 循 环 语句 分 为 几 种 不 
同 的 类 型 ， 但 它们 的 工作 原理 几乎 一 样 : 只 要 给 定 条 件 仍 能 得 到 满足 ， 
包含 在 循环 语句 里 的 代码 就 将 重复 地 执行 下 去 ; 一 旦 给 定 条 件 的 求 值 结 
条 不 再 是 true， 循 环 也 就 到 此 为 止 。 








2.5.1 while 循环 
while 循环 与 if 语句 非常 相似 ， 它 们 的 语法 几乎 完全 一 样 : 


while (condition) ( 
statements; 


} 








while 循环 与 if 语句 唯一 的 区 别 是 : 只 要 给 定 条 件 的 求 值 结果 是 true 
下 面 是 一 个 while 循环 
和 例子: 


var count = 1; 

while (count « 11) ( 
alert (count); 
count++; 


} 





我 们 来 仔细 分 析 一 下 上 面 这 段 代 码 。 首 先 ， 创 建 数值 变量 count 并 赋值 
为 1 ; 然后 ， 以 count < 11 一 一 意思 是 “只 要 变量 count 的 值 小 于 11， 
就 重复 执行 这 个 循环 ” 为 条 件 创建 一 个 while 循环 。 在 while 循环 








的 内 部 ， 用 “++ ”操作 符 对 变量 count 的 值 执行 加 1 操作 ， 而 这 一 操作 将 
重复 执行 10 次 。 如 果 用 Web 浏 览 右 来 观察 这 上 段 代 码 的 执行 情况 ， 将 会 看 
到 一 个 alert 对 话 框 闪现 了 10 次 。 这 条 循环 语句 执行 完毕 后 ， 变 量 
count 的 值 将 是 11。 


注意 ”这 里 的 关键 是 在 while 循环 的 内 部 必须 发 生 一 坚 会 影 啊 循 
环 控制 条 件 的 事情 。 在 上 例 中 ， 我 们 在 while 循环 的 内 部 对 变量 
count 的 值 进 行 了 加 1 操作 ， 而 这 将 导致 循环 控制 条 件 在 经 过 10 次 
人 循环 后 的 求 值 结果 变 成 false 。 如 果 我 们 不 增加 变量 count 的 值 ， 
这 个 while 循环 将 永远 执行 下 去 。 


do...while 循环 
类 似 于 if 语句 的 情况 ，while 循环 的 花 括号 部 分 所 包含 的 语句 有 可 能 
不 被 执行 ， 因 为 对 循环 控制 条 件 的 求 值 发 生 在 每 次 循环 开始 之 前 ， 所 以 


人 
行 。 


在 茶 些 场合 ， 我 们 硕 望 那些 包含 在 循环 语句 内 部 的 代码 至 少 执行 一 次 。 
XIN, do 循环 是 我 们 的 最 佳 选择 。 下 面 是 do 循环 的 语法 : 


do { 
statements; 
) while (condition); 








这 与 刚才 介绍 的 while 循环 非常 相似 ， 但 有 个 显而易见 的 区 别 : 对 循环 
控制 条 件 的 求 值 发 生 在 每 次 循环 结束 之 后 。 因 此 ， 即 使 循环 控制 条 件 的 
首次 求 值 结果 是 false ， 包 含 在 花 括 号 里 的 语句 也 至 少 会 被 执行 一 次 。 


我 们 可 以 把 前 一 小 节 里 的 while 循环 改写 为 如 下 所 示 的 do. . .while ff 





var count = 1; 

do { 
alert (count); 
count++; 

} while (count < 11); 


| 


这 上 段 代码 的 执行 结果 与 while 循环 完全 一 样 : alert 消息 将 内 现 10 次 ; 
在 循环 结束 后 ， 变 量 count 的 值 将 是 11。 


再 来 看 看 下 面 这 个 变 体 : 


var count = 1; 
do { 
alert (count); 
count++; 


} while (count < 1); 





在 上 面 这 个 do 循环 里 ， 循 环 控制 条 件 的 求 值 结果 永远 不 为 true : 变量 

count 的 初始 值 是 1:， 所 以 它 在 这 里 永远 不 会 小 于 1。 可 是 ， 因 为 do fü 

环 的 循环 控制 条 件 出 现在 花 括 号 部 分 之 后 ， 所 以 包含 在 这 个 do 循环 内 

部 的 代码 还 是 执行 了 一 次 。 也 就 是 说 ， 仍 将 看 到 一 条 alert 消息 。 这 些 

变量 count 的 值 将 是 2， 尽 管 循环 控制 条 件 的 求 值 结 
是 false 。 








2.5.2 for 循环 





用 for 循环 来 重复 执行 一 些 代码 也 很 方便 ， 它 类 似 于 while 循环 。 事 实 
上 ，for 循环 只 是 刚才 介绍 的 while 循环 的 一 种 变 体 。 如 果 仔 细 观 察 上 
Sr 循环 的 例子 ， 就 会 发 现 它 们 都 可 以 改写 为 如 下 所 示 的 
vy, 





initialize; 

while (condition) ( 
statements; 
increment; 


} 





而 for (i> Ad eH BCS AUN PA A UO: 


for (initial condition; test condition; alter condition) ( 


statements; 


} 





用 for 循环 来 重复 执行 一 些 代 码 的 好 处 是 循环 控制 结构 更 加 清晰 。 与 循 
环 有 关 的 所 有 内 容 都 包含 在 for 语句 的 圆 括号 部 分 。 


可 以 把 上 一 小 市 里 的 例子 改写 为 如 下 所 示 的 for 循环 : 





for (var count = 1; count < 11; count++ ) { 
alert (count); 


} 





与 循环 有 关 的 所 有 内 容 都 包含 在 for 语句 的 圆 括号 里 。 现 在 ， 当 我 们 把 
一 些 代 码 放 在 花 括 号 中 间 的 时 候 ， 我 们 清楚 地 知道 那些 代码 将 被 执行 10 


次 。 


for 循环 最 常见 的 用 途 之 一 是 对 某 个 数组 里 的 全 体 元 素 进 行 表 历 处 理 。 
这 往往 需要 用 到 数组 的 array .length 属性 ， 这 个 属性 可 以 告诉 我 们 在 
给 定数 组 里 的 元 素 的 个 数 。 一 定 要 记 住 数组 下 标 从 0 而 不 是 1 开始 。 下 面 
的 例子 中 ， 数 组 有 4 个 元 素 。count 变量 对 于 数组 中 每 个 元 素 都 是 从 0 开 
始 按 1 递 增 。 数 到 4 时 ， 测 试 条件 失败 ， 循 环 终止 ，3 是 从 数组 中 检索 到 
的 最 后 一 个 下 标 。 











var beatles = Array("John", "Paul","George", Ringo"); 
for (var count = 0 ; count « beatles.length; count++ ) { 
alert(beatles[count]); 


} 





运行 这 段 代 码 ， 将 看 到 4 条 alert WA, CDIA MME Beatles BAN 


四 位 成 员 。 


2.6 ”函数 

QU ER ig ESE I BRS, DME ee. PRL 
(function) 就 是 一 组 允许 在 你 的 代码 里 随时 调用 的 语句 。 事 实 上 ， 每 
个 函数 实际 上 是 一 个 短小 的 脚本 。 

作为 一 种 良好 的 编程 习惯 ， 应 该 先 对 函数 做 出 定义 再 调用 它们 。 


下 面 是 一 个 简单 的 示例 函数 : 


function shout() { 
var beatles = aii Ad John", "Paul","George","Ringo"); 
for (var count = 60 ; court. < best lee: length; count++ ) { 
alert(beatles[count]); 





这 个 函数 里 的 循环 语句 将 依次 弹出 对 话 框 来 显示 Beatles 乐 队 成 员 的 名 
字 。 现 在 ， 如 果 想 在 自己 的 脚本 里 执行 这 一 动作 ， 可 以 随时 使 用 如 下 的 
语句 来 调用 这 个 函数 : 


每 当 需 要 反复 做 一 件 事 时 ， 都 可 以 利用 函数 来 避免 重复 键入 大 量 的 相同 
内 容 。 不 过 ， 函 数 的 真正 威力 体现 在 ， 你 可 以 把 不 同 的 数据 传递 给 它 
们 ， 而 它们 将 使 用 这 些 数据 去 完成 预定 的 操作 。 我 们 把 传递 给 函数 的 数 
据 称 为 参数 (argument) 。 


定义 一 个 函数 的 语法 : 


function name(arguments) { 
statements; 
} 


| 


JavaScript 提 供 了 许多 内 建 函 数 ， 在 前 面 多 次 出 现 过 的 alert 就 是 一 例 。 
这 个 函数 需要 我 们 提供 一 个 参数 ， 它 将 弹出 一 个 对 话 框 来 显示 这 个 参数 
的 值 。 


在 定义 函数 时 ， 你 可 以 为 它 声明 任意 多 个 参数 ， 只 要 用 逗号 把 它们 分 隔 
开 来 就 行 。 在 函数 的 内 部 ， 你 可 以 像 使 用 普 通 变 量 那样 使 用 它 的 任何 一 
个 参数 

下 面 是 一 个 需要 传递 两 个 参数 的 函数 。 如 果 把 两 个 数值 传递 给 这 个 函 
数 ， 这 个 函数 将 对 它们 进行 乘法 运算 : 


function multiply(num1,num2) { 
var total = numi * num2; 
alert(total); 


} 





aoe 函数 的 脚本 里 ， 我 们 可 以 从 任意 位 置 去 调用 这 个 函数 ， 如 
Pia: 


multiply(10,2); 


把 数值 10 和 2 传递 给 multiply() 函数 的 结果 如 图 2-8 所 示 。 





图 2-8 


这 将 产生 这 样 一 种 视觉 效果 : 屏幕 上 会 并 刻 弹 出 一 个 显示 乘法 运算 结果 
(20) 的 alert 对 话 框 。 如 果 这 个 函数 能 把 结果 返回 给 调用 这 个 函数 的 
语句 往往 会 更 有 用 。 这 很 容易 做 到 : 函数 不 仅 能 够 〈 以 参数 的 形式 ) Re 
收 数 据 ， 还 能 够 返回 数据 。 


我 们 完全 可 以 创建 一 个 函数 并 让 它 返 回 一 个 数值 、 一 个 字符 串 、 一 个 数 
组 或 一 个 布尔 值 。 这 需要 用 到 return 语句 : 


function multiply(num1,num2) { 
var total = numi * num2; 
return total; 


} 





下 面 这 个 函数 只 有 一 个 参数 〈 一 个 华氏 温度 值 ) ， 它 将 返回 一 个 数值 
(同一 温度 的 摄氏 温度 值 〉: 


function convertToCelsius(temp) { 
var result = temp - 32; 
result = result / 1.8; 
return result; 


} 





函数 的 真正 价值 体现 在 ， 我 们 还 可 以 把 它们 当做 一 种 数据 类 型 来 使 用 ， 
这 意味 着 可 以 把 一 个 函数 的 调用 结果 赋 给 一 个 变量 : 


var temp_fahrenheit = 95; 
var temp celsius = convertToCelsius(temp fahrenheit) ; 
alert(temp celsius); 





把 华氏 温度 值 95 转 换 为 摄氏 温度 值 的 结果 如 图 2-9 所 示 。 





图 2-9 


在 这 个 例子 里 ， 变 量 temp_celsius 的 值 将 是 35， 这 个 数值 
由 convertToCelsius 函数 返回 。 


你 一 定 想 了 解 应 该 如 何 命名 变量 和 函数 。 在 命名 变量 时 ， 我 用 下 划 线 来 
分 隅 各 个 单词 ;在 命名 函数 时 ， 我 从 第 二 个 单词 开始 把 每 个 单词 的 第 一 
个 字母 写成 大 写 形式 〈 也 就 是 所 谓 的 驼峰 命名 法 ) 。 我 这 么 做 是 为 了 能 
够 一 眼看 出 哪些 名 字 是 变量 ， 哪 些 名 字 是 函数 。 与 变量 的 情况 一 样 ， 
JavaScript 语 言 也 不 允许 函数 的 名 字 里 包含 空格 。 驼 峰 命名 法 可 以 在 不 违 
( en 下 ， 把 变量 和 函数 的 名 字 以 一 种 既 简单 又 明确 的 方式 
X 分 AÑ o 


变量 的 作用 域 
前 面 讲 过 ， 作 为 一 种 好 的 编程 习惯 ， 在 第 一 次 对 茶 个 变量 赋值 时 应 该 

















Hvar 对 其 做 出 声明 。 当 在 函数 内 部 使 用 变量 时 ， 残 更 应 该 这 么 做 。 


变量 既 可 以 是 全 局 的 ， 也 可 以 是 局 部 的 。 在 谈论 全 局 变量 和 局 部 变量 之 
间 的 区 别 时 ， 我 们 其 实 是 在 讨论 变量 的 作用 域 (scope) 。 


全 局 变量 (global variable) 可 以 在 脚本 中 的 任何 位 置 被 引用 。 一 旦 你 
在 某 个 脚本 里 声明 i cA 就 可 ，。 E 
一 一 包括 函数 内 音 整个 


局 部 变量 (ocal variable) 只 存在 于 声明 它 的 那个 函数 的 内 部 ， 在 那个 
人 




















因此 ， 我 们 在 函数 里 既 可 以 使 用 全 局 变量 ， 也 可 以 使 用 局 部 变量 。 这 很 
有 用 ， 但 它 也 会 导致 一 些 问题 。 如 有 果 在 一 个 函数 的 内 部 不 小 心 使 用 了 茶 
个 全 局 变量 的 名 字 ， 即 使 本 意 是 想 使 用 一 个 局 部 变量 ，JavaScript 也 会 认 
为 是 在 引用 那个 全 局 变量 。 

还 好 ， 可 以 用 var 关键 字 明 确 地 为 函数 变量 设 定 作用 域 。 

如 宁 在 茶 个 函数 中 使 用 了 var ， 那 个 变量 就 将 个 视 为 一 个 局 部 变量 ， 它 
只 存在 于 这 个 函数 的 上 下 文中 ; 反之 ， 如 果 没 有 使 用 var ， 那 个 变量 就 
将 被 视 为 一 个 全 局 变量 ， 如 果 脚 本 里 已 经 存在 一 个 与 之 同名 的 全 局 变 
量 ， 这 个 函数 就 会 改变 那个 全 局 变量 的 值 。 


我 们 来 看 下 面 这 个 例子 : 














function square(num) ( 
total = num * num; 
return total; 


} 
var total = 50; 


var number = square(20); 
alert(total); 





RE Peo cmon ee eer ae 如 图 2-10 所 


人 





图 2-10 


全 局 变量 total 的 值 变 成 了 400。 我 的 本 意 是 让 square() 函数 只 把 它 计 
算出 来 的 平方 值 返回 给 变量 number ， 但 因为 未 把 这 个 函数 内 部 的 
total 变量 明确 地 声明 为 局 部 变量 ， 这 个 函数 把 名 字 同 样 是 total 的 那 
个 全 局 变量 的 值 也 改变 了 。 


把 这 个 函数 写成 如 下 所 示 的 样子 才 是 正确 的 : 





function square(num) ( 
var total - num * num; 
return total; 


} 





现在 ， 全 局 变量 total 变 得 安全 了 ， 再 怎么 调用 square() 函数 也 不 会 
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时 ， 我 们 一 定 要 把 它 内 部 的 变量 全 都 明确 地 声明 为 局 部 变量 。 如 果 你 总 
7E TE RASS UR var 关键 字 来 定义 变量 ， 就 能 避免 任何 形式 的 二 义 性 隐 








2.7 WK 

MR Cobject) 是 一 种 非常 重要 的 数据 类 型 ， 但 此 前 我 们 还 没有 认真 对 
待 它 。 对 象 是 自 包含 的 数据 集合 ， 包 含 在 对 象 里 的 数据 可 以 通过 两 种 形 
式 访 问 属性 (property) 和 方法 (method) : 


。 属性 是 隶属 于 茶 个 特定 对 象 的 变量 
。 方法 是 只 有 荣 个 特定 对 象 才能 调用 的 函数 。 


对 象 束 是 由 一 些 属性 和 方法 组 合 在 一 起 而 构成 的 一 个 数据 实体 。 
在 JavaScript 里 ， 属 性 和 方法 都 使 用 “点 ”语法 来 访问 : 




















Object.property 
Object .method() 





你 已 经 见 过 如 何 用 mood 和 age 等 变量 来 存放 诸如 “心情 ?和 “年 龄 ”之 类 的 
值 。 如 果 它 们 是 某 个 对 象 的 属性 一 一 这 里 不 妨 假设 那个 对 象 的 名 字 
是 Person ， 我 们 就 必须 使 用 如 下 所 示 的 记号 来 使 用 它们 : 











Person.mood 
Person.age 





假如 Person 对 象 还 关联 着 一 些 诸如 walk() 和 sleep() 之 类 的 函数 ， 这 
些 函 数 就 是 这 个 对 象 的 方法 ， 而 我 们 必须 使 用 如 下 所 示 的 记号 来 访问 它 
们 : 





Person.walk() 
Person.sleep() 





把 这 些 属性 和 方法 全 部 集合 在 一 起 ， 我 们 就 得 到 了 一 个 Person X12. 


为 了 使 用 Person 对 象 来 描述 一 个 特定 的 人 ， 和 需要 创建 一 个 Person 对 象 
的 实例 Cinstance) 。 实 例 是 对 象 的 具体 个 体 。 例 如 ， 你 和 我 都 是 人 ， 
都 可 以 用 Person 对 象 来 描述 ;但 你 和 我 是 两 个 不 同 的 个 体 ， 很 可 能 
着 不 同 的 属性 〈 例 如 ， 你 和 我 的 年 龄 可 能 不 一 样 ) 。 因 此 ， 你 和 我 对 应 
着 两 个 不 同 的 Person 对 象 一 一 它们 虽然 都 是 Person 对 象 ， 但 它们 是 两 
个 不 同 的 实例 。 


为 给 定 对 象 创建 一 个 新 实例 需要 使 用 new 关键 字 ， 如 下 所 示 : 


var jeremy = new Person; 


上 面 这 条 语句 将 创建 出 Person 对象 的 一 个 新 实例 jeremy 。 我 们 束 可 以 
像 下 面 这 样 利 用 Person 对 象 的 属性 来 检索 关于 jeremy 的 信息 了 : 











Jeremy .age 
jeremy .mood 








对 象 、 必 性、 方法 和 实例 等 概念 比较 抽象 ， 为 了 让 大 家 对 这 些 概念 有 一 
个 直观 的 认识 ， 我 在 这 里 用 虚构 的 Person 对 象 作为 例子 。JavaScript 里 并 
没有 Person 对 象 。 我 们 可 以 利用 JavaScript 来 创建 自己 的 对 象 一 一 术语 
为 用 户 定义 对 象 〈user-defined object) 。 这 是 一 个 相当 高 级 的 主题 ， 我 
们 眼下 还 无 需 对 它 做 进一步 讨论 。 

在 电视 上 的 毫 饪 节目 里 ， 只 要 镜头 一 转 ， 厨 师 就 可 以 端 出 一 盘 美味 的 玉 
ATE KARS Ath: “这 是 我 刚 做 好 的 >”。JavaScript 与 这 种 节目 里 的 主持 
人 颇 有 几 分 相似 : 它 提 供 了 一 系列 预先 定义 好 的 对 象 ， 这 些 可 以 拿 来 就 
用 的 对 象 称 为 内 建 对 象 (native object) 。 


2.7.1 内 建 对 象 
你 其 实 已 经 见 过 一 些 内 建 对 象 了 ， 数 组 就 是 其 中 一 种 。 当 我 们 使 用 new 








关键 字 去 初始 化 一 个 数组 时 ， 其 实 是 在 创建 一 个 Array 对 象 的 新 实例 : 


var beatles = new Array(); 


当 需 要 了 解 某 个 数组 有 多 少 个 元 素 时 ， 利 用 Array AM length 属性 
来 获得 这 一 信息 : 


beatles.length; 


Array 对 象 只 \ 是 诺 多 JavaScript 门 建 对 象 中 的 一 种 。 其 他 例子 包括 Math 
对 象 和 Date 对 象 ， 它 们 分 别提 供 了 许多 非常 有 用 的 方法 供 人 们 处 理 数 
值 和 日 期 值 。 例 如 ，Math 对 象 的 round 方法 可 以 把 十 进 制 数值 售 入 为 
一 个 与 之 最 接近 的 整数 : 











var num = 7.561; 
var num = Math.round(num) ; 


alert(num) ; 





Date 对 象 可 以 用 来 存储 和 检索 与 特定 日 期 和 时 间 有 关 的 信息 。 在 创建 
Date 对 象 的 新 实例 时 ，JavaScript 解 释 器 将 目 动 地 使 用 当前 日 斯 和 时 间 
对 它 进行 初始 化 : 


var current_date = new Date(); 


Date 对 象 提供 了 getDay() ~ getHours() ~ getMonth() 等 一 系列 方 
法 ， 以 供 入 们 用 来 检索 与 特定 日 期 有 关 的 各 种 信息 。 例 如 ，getDay ( ) 
方法 可 以 告诉 我 们 给 定 日 期 是 星期 几 : 








var today = current date.getDay(); 


ee ， 内 建 对 象 可 以 帮助 我 们 快速 、 简 单 地 完成 许多 
EF 


2.7.2 {REX R 


除了 内 建 对 象 ， 还 可 以 在 JavaScript 脚 本 里 使 用 一 些 已 经 预先 定义 好 的 其 
他 对 象 。 这 些 对 象 不 是 由 JavaScript 语 言 本 身 而 是 由 它 的 运行 环境 提供 
的 。 具 体 到 Web 应 用 ， 这 个 环境 就 是 浏览 器 。 由 浏览 器 提供 的 预定 义 对 
象 被 称 为 宿主 对 象 (host object) 。 


宿主 对 象 包括 Form Image 和 Element 等 。 我 们 可 以 通过 这 些 对 象 获 
得 关于 网 页 上 表单 、 图 像 和 各 种 表单 元 素 等 信息 。 


本 书 没 有 收录 这 几 个 宿主 对 象 的 例子 。 另 一 种 和 宿主 对 象 也 能 用 来 获得 网 
页 上 的 任何 一 个 元 素 的 信息 ， 它 就 是 document 对 象 。 在 本 书 的 后 续 内 
容 里 ， 我 们 将 向 大 家 介绍 document 对 象 的 许多 属性 和 方法 。 








2B. zn 


在 本 间 中 ， 我 们 介绍 了 JavaScript 语 言 的 基础 知识 。 在 本 书 的 后 续 章节 
中 ， 我 们 会 用 到 这 里 介绍 的 许多 术语 : 语句 、 变 量 、 数 组 和 函数 每 。 这 
些 概念 有 的 现在 还 不 太 容 易 理解 ， 但 我 相信 你 在 看 过 它们 在 脚本 里 的 实 
际 用 途 后 ， 就 能 彻底 搞 清 楚 了 。 在 后 面 的 学 习 里 ， 如 果 需 要 重 温 这 些 术 
语 的 含义 ， 随 时 可 以 返回 到 本 章 来 。 


本 章 只 对 “对 象 ” 做 了 一 个 概念 性 的 介绍 。 如 采 你 对 它 的 理解 还 不 够 全 面 
TRA, Ak. RIE REE Rp document 对 象 。 我 们 将 先 
问 大 家 介绍 一 些 与 这 个 对 象 相关 联 的 属性 和 方法 ， 它 们 都 是 由 W3C 的 标 
准 DOM 提 供 的 。 


在 下 一 章 中 ， 我 们 将 介绍 基于 DOM 的 基本 编程 思路 ， 并 演示 如 何 使 用 
它 的 一 些 功能 非 第 强大 的 方法 。 














。 市 点 的 概念 

。 5 个 常用 DOM 方 法 : getElementById 
~ getElementsByTagName 、getElementsByClassName 
. getAttribute flisetAttribute 


终于 要 与 DOM 面 对 面 了 。 本 章 将 介绍 DOM， 带 领 大 家 透 过 DOM 去 看 世 
ie 


3.1 文档 : DOM 中 的 “D” 


如 果 没 有 document (XFS) ，DOM 也 就 无 从 谈 起 。 当 创建 了 一 个 网 页 
并 把 它 加 载 到 Web 浏 览 器 中 时 ，DOM 就 在 幕后 悄然 而 生 。 它 把 你 编写 
的 网 页 文档 转换 为 一 个 文档 对 象 。 


在 人 类 语言 中 ,“ 对 象 * 这 个 词 的 含义 往往 不 那么 明确 ， 它 几乎 可 以 用 来 
称呼 任何 一 种 东西 。 但 在 程序 设计 语言 中 , “对 象 " 这 个 词 的 含义 非常 明 
确 。 











3.2 对象: DOM 中 的 “O>” 


在 上 一 章 的 末尾 ， 我 们 向 大 家 展示 了 几 个 JavaScript 对 象 的 例子 。 你 应 该 
还 记得 , “对 象 ” 是 一 种 上 自足 的 数据 集合 。 与 茶 个 特定 对 象 相关 联 的 变量 
被 称 为 这 个 对 象 的 属性 ;只 能 通过 东 个 特定 对 象 去 调用 的 函数 被 称 为 这 
个 对 象 的 方法 。 


JavaScript 语 言 里 的 对 象 可 以 分 为 三 种 类 型 。 


e 用户 定义 对 象 〈user-defined object) : 由 程序 员 自 行 创建 的 对 象 。 
本 书 不 讨论 这 种 对 象 。 

e 内 建 对 象 Cnative object) : 内 建 在 JavaScript 语 言 里 的 对 象 ， 如 
Array 、Math 和 Date 等 。 

e JEX Z Chost object) : 由 浏览 器 提供 的 对 象 。 


即使 是 在 JavaScript 的 最 初版 本 里 ， 对 编写 脚本 来 说 非常 重要 的 一 些 答 主 
对 象 束 已 经 可 用 了 ， 它 们 当中 最 基础 的 对 象 是 window 对 象 。 


Window 对 象 对 应 着 浏览 器 窗口 本 里 ， 这 个 对 象 的 属性 和 方法 通常 统称 
为 BOM《〈 浏 览 器 对 象 模型 ) ， 但 我 觉得 称 为 Window Object Model (&i 
口 对 象 模型 ) 更 为 贴切 。BOM 提 供 了 window.open 和 window.blur 等 
方法 ， 这 些 方法 某 种 程度 上 要 为 到 处 被 滥用 的 各 种 弹出 窗口 和 下 拉 沫 上 
负责 。 难 怪 JavaScript 会 有 一 个 不 好 的 名 声 ! 


值得 庆 邓 的 是 ， 我 们 不 需要 与 BOM 打 太 多 的 交道 ， 而 是 把 注意 力 集 中 
在 浏览 器 窗口 内 的 网 页 内 容 上 。document 对 象 的 主要 功能 就 是 处 理 网 
ag 在 本 书 的 后 续 内 容 里 ， 我 们 几乎 只 讨论 document 对 象 的 属性 
和 方法 。 


现在 ， 我 们 已 经 对 DOM 中 的 字母 “D”(document， 文 档 ) MF 
母 <0”(object， 对 象 ) 做 了 解释 ， 那 么 字母 “M”* 又 代表 着 什么 呢 ? 














3.3 fi. DOM HK “mM” 


DOM 中 的 “M” 代 表 着 “Model”( 模 型 ，， 但 说 它 代 表 着 “Map”( 地 图 ) 
也 未 尝 不 可 。 模 型 也 好 ， 地 图 也 黑 ， 它 们 的 含义 都 是 某 种 事物 的 表现 形 
式 。 就 像 一 个 模型 火车 代表 着 一 列 真正 的 火车 、 一 张 城市 街道 图 代表 着 
一 个 实际 存在 的 城市 那样 ，DOM 代 表 着 加 载 到 浏览 器 窗口 的 当前 网 
页 。 浏 览 器 提供 了 网 页 的 地 图 〈 或 者 说 模型 ) ， 而 我 们 可 以 通过 
JavaScript 去 读 取 这 张 地 图 。 


既然 是 地 图 ， 就 必须 有 诸如 方向 、 等 蜗 线 和 比例 尺 之 类 的 图 例 。 要 想 看 
懂 和 使 用 地 图 ， 残 必须 知道 这 些 图 例 的 含义 和 用 途 ， 这 个 道理 同样 适用 
于 DOM。 要 想 从 DOM 获 得 信息 ， 必 须 先 把 各 种 表示 和 描述 文档 的 “图 
Bil” 7:9] A 


DOM 把 一 份 文 档 表示 为 一 棵 树 〈 这 里 所 说 的 “ 树 ” 是 数学 意义 上 的 概 
念 ) ， 这 是 我 们 理解 和 运用 这 一 模型 的 关键 。 更 具体 地 说 ，DOM 把 文 
TARAS A PRAY 
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系 ， 并 使 用 parent (40) . child Cf ~ sibling (h$) 等 记号 来 表明 
家 族 成 员 之 间 的 关系 。 家 谱 树 可 以 把 一 些 相 当 复 杂 的 关系 简明 地 表示 出 
来 : 一 位 特定 的 家 族 成 员 既 是 某 些 成 员 的 父 非 ， 又 是 另 一 位 成 员 的 子 
非 ， 同 时 还 是 男 一 位 成 员 的 兄弟 。 


家 详 树 模型 非常 适合 用 来 表示 一 份 用 (X)HTML 语 言 编写 出 来 的 文档 。 
请 看 图 3-1 中 这 份 非常 基本 的 网 页 ， 它 的 内 容 是 一 份 购物 清单 。 

















What to buy 


Don't forget to buy this stuff. 


e A tin of beans 


e Cheese 
e Milk 
Done 
图 3-1 


«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /» 
«title»Shopping list«/title» 
</head> 
<body> 
«hi»What to buy</h1> 
«p title-"a gentle reminder"»Don't forget to buy this stuff.«/p» 
«ul id="purchases"> 
«li»A tin of beans«/li» 
«li class="sale">Cheese</1i> 
«li class-"sale important" »Milk«/li» 
«/ul» 
</body> 
</html> 





这 份 文 档 可 以 用 图 3-2 中 的 模型 来 表示 。 


html 
head body 
meta title h1 p ul 


图 3-2 


现在 我 们 来 分 析 一 下 这 个 网 页 的 结构 ， 了 解 它 的 构成 ， 看 看 它 为 什么 那 
么 适合 用 前 面 提 到 的 模型 表示 。DOCTYPE 之 后 ， 一 个 打开 了 的 <htm1> 
标签 标识 整个 文档 的 开始 ， 这 个 网 页 里 的 所 有 其 他 元 素 都 包含 在 这 个 元 
素 里 ， 这 表示 它 至 少 是 一 个 父亲 (parent) 。 又 因为 所 有 其 他 的 元 素 都 
包含 在 其 内 部 ， 所 以 这 个 <htm1> 标签 既 没 有 父亲 ， 也 没有 兄弟 。 如 果 
这 是 一 棵 真正 的 树 ， 这 个 <html> 标签 就 是 树 根 。 


根 元 素 是 html 。 不 管 从 哪个 角度 看 ，html 都 代表 整个 文档 。 


接 下 来 深入 一 层 ， 我 们 发 现 有 <head> 和 <body> 两 个 分 支 。 它 们 位 于 同 
一 层次 且 互 不 包含 ， 所 以 它们 是 兄弟 关系 。 它 们 有 着 共同 的 父 元 
E 但 又 各 有 各 的 子 元 素 ， 所 以 它们 本 身 又 是 其 他 一 些 元 素 的 
父 元 素 。 


<head> 元 素 有 两 个 子 元 素 : «meta» 和 <title> (这 两 个 元 素 是 兄弟 关 
f) . «body» 元 素 有 三 个 子 元 素 : <h1> <p> 和 <ul> (这 三 个 元 素 
是 兄弟 关系 ) 。 继 续 深 入 下 去 ， 我 们 发 现 <ul> 也 是 一 个 父 元 素 ， 它 有 























三 个 子 元 素 ， 它 们 都 是 <li> 元 素 ， 有 一 些 class 属性 。 


利用 这 种 简单 的 家 谱 关 系 记号 ， 我 们 可 以 把 各 元 素 之 间 的 关系 简明 清晰 
地 表达 出 来 。 例 如 ，<h1> 和 <ul> 之 间 是 什么 关系 ? 答案 是 它们 是 兄弟 
AA. HA «body» 和 <ul> 之 间 又 是 什么 关系 ? <body> <ul> 的 父 元 
素 ，<ul> 是 <body> 的 一 个 子 元 素 。 


如 果 你 能 把 一 个 文档 的 各 种 元 系 想 象 成 一 棵 家 详 树 ， 我 们 就 可 以 用 同样 
的 术语 描述 DOM。 不 过 ， 与 使 用 "家 谐 树 ” 这 个 术语 相 比 ， 把 文档 称 
为 “市 点 树 ” 更 准确 。 





3.4 节点 


RA (node) 这 个 词 是 个 网 络 术 语 ， 它 表示 网 络 中 的 一 个 连接 点 。 一 
个 网 络 就 是 由 一 些 节 点 构成 的 集合 。 


在 现实 世界 里 ， 一 切 事物 都 由 原子 构成 。 原 子 是 现实 世界 的 节点。 但 原 
子 本 里 还 可 以 进一步 分 解 为 更 细小 的 亚 原子 人 微粒。 这 些 亚 原 子 微粒 同样 
也 被 当成 是 市 反 。 


DOM 也 是 同样 的 情况 。 文 档 是 由 节点 构成 的 集合 ， 只 不 过 此 时 的 而 反 
古文 档 树 上 的 树枝 和 树叶 而 已 。 


在 DOM 里 有 许多 不 同类 型 的 节点 。 就 像 原 子 包 含 着 亚 原子 微粒 那样 ， 
也 有 很 多 类 型 的 DOM 节 点 包含 着 其 他 类 型 的 节点 。 接 下 来 我 们 先 看 看 
其 中 的 三 种 : 元素 节点 、 文 本 节点 和 属性 节点 。 




















3.4.1 元素 节点 
DOM 的 原子 是 元 素 节点 (elementnode) 。 


在 描述 刚才 那 份 “购物 清单 ”文档 时 ， 我 们 使 用 了 诸如 xbody> 、<p> 和 
<ul> 之 类 的 元 素 。 如 果 把 Web 上 的 文档 比 做 一 座 大 厦 ， 元 素 就 是 建造 
这 座 大 厦 的 砖 块 ， 这 些 元 素 在 文档 中 的 布局 形成 了 文档 的 结构 。 


标签 的 名 字 束 是 元 素 的 名 字 。 文 本 段落 元 素 的 名 字 是 “p ”， 无 序 清单 元 
素 的 名 字 是 “ul1”， 列 表 项 元 系 的 名 字 是 “1i”。 


元 素 可 以 包含 其 他 的 元 系 。 在 我 们 的 “购物 清单 ”文档 里 ， 所 有 的 列表 项 
元 素 都 包含 在 一 个 无 序 清单 元 系 的 内 部 。 事 实 上 ， 没 有 被 包含 在 其 他 元 
素 里 的 唯一 元 素 是 <htm1> 元 素 ， 它 是 我 们 的 市 皮 树 的 根 元 系 。 





























3.4.2 文本 节点 


元 素 市 点 只 是 市 扩 类 型 的 一 种 。 如 果 一 份 文档 完全 由 一 些 空白 元 素 构 
成 ， 它 将 有 一 个 结构 ， 但 这 份 文档 本 里 将 不 会 包含 什么 内 容 。 在 内 容 为 
王 的 互联 网 上 ， 绝 大 多 数 内 容 都 是 由 文本 提供 的 。 




















在 “购物 清单 ”例子 里 ，<p> 7638 EAA CA "Don't forget to buy this 
stuff.”。 它 是 一 个 文本 节点 (text node) 。 


在 XHTML 文档 里 ， 文 本 节点 总 是 被 包含 在 元 素 节点 的 内 部 。 但 并 非 所 
有 的 元 素 节 点 都 包含 有 文本 节点 。 在 “购物 清单 ”文档 里 ，<ul> 元 素 没 
有 直接 包含 任何 文本 闻 点 ， 它 包含 着 其 他 的 元 素 节 点 (一 些 <1li> 元 
A)» ARERR 


3.4.3 ”属性 节点 


属性 结 扣 用 来 对 元 素 做 出 更 共 体 的 描述 。 例 如 ， 几 乎 所 有 的 元 素 都 有 一 
2 属性 ， 而 我 们 可 以 利用 这 个 属性 对 包含 在 元 素 里 的 东西 做 出 准 
确 的 描述 : 


<p title-"a gentle reminder">Don't forget to buy this stuff.</p> 


在 DOM 中 ，title="a gentle reminder" 是 一 个 属性 节点 (attribute 
node) ， 如 图 3-3 所 示 。 因 为 属性 总 是 被 放 在 起 始 标签 里 ， 所 以 属性 节 

点 总 是 被 包含 在 元 系 节 点 中 。 并 非 所 有 的 元 素 都 包含 着 属性 ， 但 所 有 的 
属性 都 被 元 素 包 售 。 












































element node 


p 
title = 
" Don't forget to 
a gentle 
reminder” buy this stuff. 
attribute node text node 


图 3-3 


在 前 面 的 “购物 清单 ”示例 文档 里 ， 可 以 清楚 地 看 到 那个 无 序 清单 元 素 
(<ul>) 有 个 id 属性 。 有 些 清单 元 素 (<li>) 有 class 属性 。 如 果 
曾经 用 过 CSS， 你 对 id 和 class 之 类 的 属性 应 该 不 会 感到 陌生 。 不 过 ， 
为 了 照顾 那些 对 CSS 还 不 太 熟 悉 的 读者 ， 我 们 下 面 将 简要 地 重 温 几 个 最 
基本 的 CSS 概 念 。 











3.4.4 CSS 


DOMJf 4i 5 PFT ACHE ME FR. BATA CSS CES 
样式 表 ) 告诉 浏览 器 应 该 如 何 显示 一 份 文档 的 内 容 。 

类 似 JavaScript 脚 本 ， 对 样式 的 声明 既 可 以 散在 文档 的 chead> 部 分 
(<style> 标签 之 间 ) ， 也 可 以 放 在 另外 一 个 样式 表 文 件 里 《参见 第 4 
章 ) 。CSS 声 明 元 素 样式 的 语法 与 JavaScript 函 数 的 定义 语法 很 相似 : 


selector { 











property: value; 











在 样式 声明 里 ， 我 们 可 以 定义 浏览 器 在 显示 元 素 时 使 用 的 颜色 、 字 体 和 
"Fx, WR Ata: 


pt 
color: yellow; 
font-family: "arial", sans-serif; 
font-size: 1.2em; 


} 





继承 Cinheritance) 是 CSS 技 术 中 的 一 项 强大 功能 。 类 似 于 DOM， CSS 
7 内 容 视 为 一 棵 节点 树 。 节 点 树 上 的 各 个 元 素 将 继承 其 父 元 素 
Y I H 可 


例如 ， 如 果 我 们 为 body 元 素 定 义 了 一 些 颜 色 或 字体 ， 包 含 在 body 元 素 
里 的 所 有 元 素 都 将 自动 获得 那些 样式 : 





body { 
color: white; 
background-color: black; 


} 





这 些 颜 色 将 不 仅 作 用 于 那些 直接 包含 在 <body> 标签 里 的 内 容 ， 还 将 作 
FAT ik BE body 元 系 凡 部 的 所 有 元 素 。 


tag 定义 的 样式 应 用 在 “购物 清单 ”示例 文档 上 后 得 到 的 网 页 
显示 效 琳 。 


What to buy 


Don't forget to buy this stuff. 


e A tin of beans 
e Cheese 
e Milk 





Done 
图 3-4 
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色 和 字体 ， 但 不 想 让 其 他 段落 受到 影响 。 为 了 获得 如 此 精细 的 控制 ， 
要 在 文档 里 插入 一 些 能 够 把 这 段 文 本 与 其 他 段落 区 别 开 来 的 特殊 标志 


a 个 或 菜 几 个 元 素 与 其 他 元 素 区 别 开 来 ， 需 要 使 用 class 属性 
id 


01. class 属性 
你 可 以 在 所 有 的 元 素 上 任意 应 用 class 属性 : 











<p class="special">This paragraph has the special class</p> 
«h2 class-"special"»So does this headline</h2> 





在 样式 表 里 ， 可 以 像 下 面 这 样 为 class 属性 值 相同 的 所 有 元 素 定义 


同一 种 样式 : 


.Special ( 
font-style: italic; 
} 





还 可 以 像 下 面 这 样 利 用 class 属性 为 一 种 特定 类 型 的 元 素 定 义 一 种 
特定 的 样式 : 


h2.special { 
text-transform: uppercase; 


} 





02. id 属性 


id 属性 的 用 途 是 给 网 页 里 的 茶 个 元 系 加 上 一 个 独一无二 的 标识 
fp. Ul BH: 


«ul id="purchases"> 








在 样式 表 里 ， 可 以 像 下 面 这 样 为 有 特定 id Jie EEL J6 38 EXS Ph 
独 理 的 样式 : 


#purchases { 
border: 1px solid white; 
background-color: #333; 
color: #ccc; 


padding: 1em; 





尽管 id 本 身 只 能 使 用 一 次 ， 样 式 表 还 是 可 以 利用 id 属性 为 包含 在 
该 特定 元 素 里 的 其 他 元 素 定 义 样式 。 


#purchases li ( 
font-weight: bold; 
} 





图 3-5 是 把 刚才 利用 id 属性 定义 的 样式 应 用 在 “购物 清单 ”示例 文档 
上 而 得 到 的 网 页 显示 效果 。 


AAA > 


What to buy 


Don't forget to buy this stuff. 





图 3-5 
id 属性 就 像 是 一 个 挂钩 ， 它 一 头 连 着 文档 里 的 某 个 元 素 ， 另 一 头 








连 着 CSS 样 式 表 里 的 某 个 样式 。DOM 也 可 以 使 用 这 种 挂钩 。 


3.4.5 ”获取 元 素 


有 3 种 DOM 方 法 可 获取 元 素 节 把 ， 分 别 是 通过 元 素 ID、 通 过 标签 名 字 和 
通过 类 名 字 来 获取 。 


01. getElementById 


DOM 提 供 了 一 个 名 为 getElementById 的 方法 ， 这 个 方法 将 返回 
一 个 与 那个 有 着 给 定 id 属性 值 的 元 素 节 点 对 应 的 对 象 。 请 注意 ， 
JavaScript 语 言 区 分 字母 大 小 写 ， 所 以 在 写 出 “getElementById” 时 干 
万 不 要 把 大 小 写 弄 错 了 。 如 果 把 它 错 写 

成 *GetElementById” 或 “getElementbyid”， 你 都 得 不 到 正确 的 结果 。 


它 是 document 对 象 特有 的 函数 。 在 脚本 代码 里 ， 函 数 名 的 后 面 必 
须 跟 有 一 对 圆 括 号 ， 这 对 圆 括号 包含 者 函数 的 参 

aX. getElementById 方法 只 有 一 个 参数 : 你 想 获得 的 那个 元 素 的 
id 属性 的 值 ， 这 个 id 值 必须 放 在 单 引号 或 双 引 号 里 。 














document. getElementById(id) 





下 面 是 一 个 例子 : 


document.getElementById("purchases") 





这 个 调用 将 返回 一 个 对 象 ， 这 个 对 象 对 应 着 document 对 象 里 的 一 
个 独一无二 的 元 素 ， 那 个 元 素 的 HTML id 属性 值 是 purchases 。 
你 可 以 用 typeof 操作 符 来 验证 这 一 点 。typeof 操作 符 可 以 告诉 我 
们 它 的 操作 数 是 一 个 字符 串 、 数 值 、 函 数 、 布 尔 值 还 是 对 象 。 


下 面 是 把 一 些 JavaScript 语 句 插入 到 前 面 给 出 的 “购物 清单 ”文档 之 后 
得 到 的 一 份 代码 清单 ， 新 增 的 代码 (黑体 字 部 分 ) 出 现在 </body> 
结束 标签 之 前 。 顺 便 说 一 句 ， 我 本 人 并 不 赞成 把 JavaScript 代 人 码 直 接 
嵌入 文档 ， 但 这 确实 是 一 种 简便 快捷 的 测试 手段 : 








<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Shopping list</title> 


</head> 
<body> 
«hi»What to buy«/hi» 
«p title-"a gentle reminder"»Don't forget to buy this stuff.«/p» 
«ul id="purchases"> 
«li»A tin of beans«/li» 
«li class="sale">Cheese</1i> 
«li class="sale important"»Milk«/li» 
</ul> 
<script> 
alert(typeof document. getElementById( "purchases" )); 
</script> 


</body> 
</html> 





把 上 面 这 些 代码 保存 为 一 个 XHTML 文件 。 当 在 web 浏 览 器 里 加 载 
这 个 XHTML 文件 ， 会 弹出 一 个 如 图 3-6 所 示 的 alert 对 话 框 ， 它 向 
你 们 报告 document .getElementById ("purchases") 的 类 型 
一 一 它 是 一 个 对 象 。 


object 





Done 


图 3-6 


02. 


事实 上 ， 文 档 中 的 每 一 个 元 素 痢 是 一 个 对 象 。 利 用 DOM 提 供 的 方 

法 能 得 到 任何 一 个 对 象 。 一 般 来 说 ， 用 不 着 为 文档 里 的 每 一 个 元 妹 
都 定义 一 个 独一无二 的 id 值 ， 那 也 太 小 题 大 做 了 。DOM 提 供 了 男 
一 个 方法 来 获取 那些 没有 id 属性 的 对 象 。 


getElementsByTagName 


getElementsByTagName 方法 返回 一 个 对 象 数 组 ， 每 个 对 象 分 别 
对 应 着 文档 里 有 着 给 定 标 签 的 一 个 元 素 。 类 似 于 getElementById 








， 这 个 方法 也 是 只 有 一 个 参数 的 函数 ， 它 的 参数 是 标签 的 名 字 : 


element.getElementsByTagName(tag) 








它 与 getElementById 方法 有 许多 相似 之 处 ， 但 它 返 回 的 是 一 个 数 
组 ， 你 在 编写 脚本 时 于 万 注 意 不 要 把 这 两 个 方法 弄 混 了 。 


下 面 是 一 个 例子 : 


document. getElementsByTagName("1i") 





这 个 调用 将 返回 一 个 对 象 数 组 ， 每 个 对 象 分 别 对 应 着 document 对 
象 中 的 一 个 列表 项 元 素 。 与 任何 其 他 的 数组 一 样 ， 我 们 可 以 利 
用 length 属性 但 出 这 个 数组 里 的 元 系 个 数 。 


首先 ， 在 上 一 小 节 给 出 的 XHTML 示例 文档 里 把 <script> 标签 中 的 
alert 语句 蔡 换 为 下 面 这 条 语句 : 





alert(document.getElementsByTagName("li").length); 


你 会 看 到 这 份 示例 文档 里 的 列表 项 元 系 的 个 数 ，3。 这 个 数组 里 的 








每 个 元 素 都 是 一 个 对 象 。 可 以 通过 利用 一 个 循环 语句 和 typeof 操 


作 符 去 遍历 这 个 数组 来 验证 这 一 点 。 例 如 ， 你 可 以 试 试 下 面 这 
个 for 循环 : 


for (var i20; i < document.getElementsByTagName("li").length; i++) { 
alert(typeof document.getElementsByTagName("li")[i]); 


} 





请 注意 ， 即 使 在 整个 文档 里 这 个 标签 只 有 一 个 元 
i$, getElementsByTagName 也 返回 一 个 数组 。 此 时 ， 那 个 数组 
的 长 度 是 1。 


你 或 许 已 经 开始 觉得 用 键盘 反复 襄 
Axdocument.getElementsByTagName ("li") 是 件 很 麻烦 的 事 
情 ， 而 这 些 长 长 的 字符 串 会 让 代码 变 得 越 来 越 难以 阅读 。 有 个 简单 
的 办 法 可 以 减少 不 必要 的 打字 量 并 改善 代码 的 可 读 性 只 要 把 
document.getElementsByTagName("li") 赋值 给 一 个 变量 即 
可 。 


请 把 <script> 标签 中 的 alert 语句 替换 为 下 面 这 些 语句 : 


var items = document.getElementsByTagName("li"); 
for (var i20; i < items.length; i++) { 
alert(typeof items[i]); 





现在 ， 你 将 看 到 三 个 alert 对 话 框 ， 显 示 的 消息 都 是 “object”。 


getElementsByTagName 人 允许 把 一 个 通配符 作为 它 的 参数 ， 而 这 

意味 着 文档 里 的 每 个 元 素 都 将 在 这 个 函数 所 返回 的 数组 里 占有 一 席 
之 地 。 通 配 符 ( 星 号 字符 “*”) 必须 放 在 引号 里 ， 这 是 为 了 让 通 配 
符 与 乘法 操作 符 有 所 区 别 。 如 果 你 想 知 道 某 份 文档 里 总 共有 多 少 个 
元 素 节 点 ， 像 下 面 这 样 使 用 通配符 即 可 : 


alert(document.getElementsByTagName("*").length); 








03. 


还 可 以 把 getElementById 和 getElementsByTagName 结合 起 来 运 
用 。 例 如 ， 刚 才 给 出 的 几 个 例子 都 是 通过 document 对 象 调 
HigetElementsByTagName 的 ， 如 果 只 想 知道 jd 属性 值 

是 purchase 的 元 素 包 含 着 多 少 个 列表 项 ， 必 须 通 过 一 个 更 具体 的 
对 象 去 调用 这 个 方法 ， 如 下 所 示 : 


var shopping = document.getElementById("purchases"); 
var items = shopping. getElementsByTagName("*") ; 





在 这 两 条 语句 执行 完毕 后 ，items 数组 将 只 包含 id 属性 值 
是 purchase 的 无 序 清单 里 的 元 素 。 有 具体 到 这 个 例子 ，items 数组 
的 长 度 刚 好 与 这 份 文档 里 的 列表 项 元 素 的 总 数 相 等 : 


alert (items.length) ; 





如 条 还 需要 更 多 的 证 据 ， 下 面 这 些 语句 将 证 明 items 数组 里 的 每 个 
值 确实 是 一 个 对 象 : 


for (var i20; i < items.length; i++) { 
alert(typeof items[i]); 
} 





getElementsByClassName 


HTML5 DOM (http://www. whatwg.org/specs/web-apps/current-work/ 
) 中 新 增 了 一 个 令 人 期 待 已 久 的 方法 : getElementsByClassName 
。 这 个 方法 让 我 们 能 够 通过 class 属性 中 的 类 名 来 访问 元 素 。 不 





过 ， 由 于 这 个 方法 还 比较 新 ， 某 些 DOM 实 现 里 可 能 还 没有 ， 因此 
在 使 用 的 时 候 要 当心 。 下 面 我 们 先 来 看 一 看 这 个 方法 能 帮 我 们 做 什 
么 ， 然 后 再 讨论 怎么 可 靠 地 使 用 该 方法 。 


5getElementsByTagName 方法 类 
似 ，getElementsByClassName 也 只 接受 一 个 参数 ， 就 是 类 名 : 


getElementsByClassName(class) 





这 个 方法 的 返回 值 也 与 getElementsByTagName 类 似 ， 都 是 一 个 
具有 相同 类 名 的 元 素 的 数组 。 下 面 这 行 代码 返回 的 就 是 一 个 数组 ， 
其 中 包含 类 名 为 "sale" 的 所 有 元 素 : 





document. getElementsByClassName("sale") 





使 用 这 个 方法 还 可 以 得 找 那 些 融 有 多 个 类 名 的 元 素 。 要 指定 多 个 类 
名 ， 只 要 在 字符 串 参 数 中 用 空格 分 隅 类 名 即 可 。 例 如 ， 
在 <script> 标签 中 添加 下 面 这 行 alert 代码 : 





alert(document.getElementsByClassName("important sale").length); 

















你 会 看 到 警告 框 中 显示 1， 表 示 只 有 一 个 元 素 匹 配 ， 因 为 只 有 一 个 


元 素 同 时 带 有 "important" 和 "sale" 类 名 。 注 意 ， 即 使 在 元 素 的 
class 属性 中 ， 类 名 的 顺序 是 "sale important" 而 非 参 数 中 指定 
的 "important sale" ， 也 照样 会 号 配 该 元 素 。 不 仅 类 名 的 实际 顺 
序 不 重要 ， 就 算 元 素 还 : 带 有 更 多 类 名 也 没有 关系 。 


与 使 用 getElementsByTagName 一 样 ， 也 可 以 组 合 使 
HigetElementsByClassName 和 getElementById 。 如 果 你 想 知 
道 在 id 为 "purchases" 的 元 素 中 有 多 少 类 名 包含 "sale" 列表 项 ， 











可 以 先 找到 那个 特定 的 对 象 ， 然 后 再 调 
HgetElementsByClassName : 


var shopping = document.getElementById("purchases"); 
var sales = shopping.getElementsByClassName("sale"); 





这 样 ，sales 数组 中 包含 的 就 只 Uf T "purchases" 列表 中 的 带 
a 类 的 元 素 。 运 行 下 面 这 行 代 码 ， 就 会 看 到 sales 数组 中 
E PAS: 





alert (sales.length) ; 





这 个 getElementsByClassName 方法 非常 有 用 ， 但 只 有 较 新 的 浏 
览 器 才 文 持 它 。 为 了 弥补 这 一 不 足 ，DOM 脚 本 程序 员 需 要 使 用 已 





有 的 DOM 方 法 来 实现 自己 的 getElementsByClassName ， 有 点 像 
是 成 人 礼 似 的 。 而 多 数 情况 下 ， 他 们 的 实现 过 程 都 A 下 面 这 
^"getElementsByClassName 大 致 相似 ， 这 个 函数 能 适用 于 新 老 
浏览 器 : 








function getElementsByClassName(node, classname) { 
if (node.getElementsByClassName) { 

// 使 用 现 有 方法 

return node.getElementsByClassName(classname); 

else ( 

var results = new Array(); 

var elems - node.getElementsByTagName("*"); 

for (var i20; i«elems.length; i++) { 





w 


if (elems[i].className.indexOf(classname) != -1) ( 
results[results.length] = elems[i]; 
} 
} 
return results; 


PO 


这 个 getElementsByClassName 函数 接受 两 个 参数 。 第 一 个 node 
表示 DOM 树 中 的 搜索 起 点 ， 第 二 个 classname 就 是 要 搜索 的 类 名 
了 。 如 果 传 入 节点 上 已 经 存在 了 适当 的 getElementsByClassName 
函数 ， 那 么 这 个 新 函数 就 直接 返回 相应 的 节点 列表 。 如 果 
getElementsByClassName 函数 不 存在 ， 这 个 新 函数 就 会 循环 蜗 
历 所 有 标签 ， 查 找 带 有 相应 类 名 的 元 素 。〈 这 个 例子 不 适用 于 多 个 
eee 如 果 使 用 这 个 函数 来 模拟 前 面 取得 购物 列表 的 操作 ， 就 可 
AX FEET: 











var shopping - document.getElementById("purchases"); 
var sales - getElementsByClassName(shopping, "sale"); 











当然 ， 搜 索 匹 配 的 DOM 元 系 的 方法 有 很 多 ， 但 真正 高 效 的 却 不 
多 ， 有 兴趣 的 读者 可 以 参考 Robert Nyman 的 文章 The Ultimate 
getElementsByClassName Chttp://robertnyman.com/2008/05/27/the- 
ultimate-getelementsbyclassname-anno-2008 ) . 


第 5 草 将 继续 讨论 类 似 的 文 持 性 问题 ， 以 及 如 何 解决 这 些 问 题 。 第 7 
章 将 更 详细 地 探讨 DOM 操 作 方 法 。 





3.4.6 HAAR 


RECARE Y AIBA EO AN A RR] “object” Walert XJ i5 
框 。 你 一 定 已 经 明白 : 文档 中 的 每 个 元 素 节 点 都 是 一 个 对 象 。 不 仅 
如 此 ， 这 些 对 象 中 的 每 一 个 还 天 生 具 有 一 系列 非常 有 用 的 方法 ， 这 
要 归功 于 DOM。 利 用 这 些 预先 定义 好 的 方法 ， 我 们 不 仅 可 以 检索 
出 文档 里 任何 一 个 对 象 的 信息 ， 甚 至 还 可 以 改变 元 素 的 属性 。 


下 面 是 对 本 章 此 前 学 习 内 容 的 一 个 简要 总 结 。 
。 At SCR LE TR AY o 


e 市 点 分 为 不 同 的 类 型 TORT. JME AACA ae. 
e getElementById 将 返回 一 个 对 象 ， 该 对 象 对 应 着 文档 里 的 一 





























个 特定 的 元 又 节点 。 
e getElementsByTagName #llgetElementsByClassName 将 返 
回 一 个 对 象 数组 ， 它 们 分 别 对 应 着 文档 里 的 一 组 特定 的 元 素 节 
e 每 个 节点 都 是 一 个 对 象 。 


接 下 来 介绍 市 反对 象 的 属性 和 方法 。 





3.5 ”获取 和 设置 属性 


至 此 ， 我 们 已 经 介绍 了 3 种 获取 特定 元 素 的 方法 : 分 别 

是 getElementById , getElementsByTagName 和 
getElementsByClassName 。 得 到 需要 的 元 素 以 后 ， 我 们 就 可 以 
设法 获取 它 的 各 个 属性 。getAttribute 方法 就 是 用 来 做 这 件 事 
的 。 相 应 地 ，setAttribute 方法 则 可 以 更 改 属 性 节点 的 值 。 











3.5.1 getAttribute 








getAttribute 是 一 个 函数 。 它 只 
性 的 名 字 : 


object.getAttribute(attribute) 





与 此 前 我 们 介绍 过 的 那些 方法 不 同 ，getAttribute 方法 不 属于 
document 对 象 ， 所 以 不 能 通过 document 对 象 调 用 。 它 只 能 通过 
元 素 节 点 对 象 调 有 用。 例如， 可 以 与 getElementsByTagName 方法 
合用 ， 获 取 每 个 <p> 元 素 的 title 属性 ， 如 下 所 示 : 


var paras = document.getElementsByTagName("p") ; 
for (var i20; i < paras.length; i++ ) { 
alert(paras[i].getAttribute("title")); 





把 上 面 这 段 代 码 放 到 前 面 给 出 的 “购物 清单 ”文件 的 末尾 ， 然 后 在 
Web 浏 览 右 里 重新 加 载 这 个 页 面 ， 屏 幕 上 将 弹出 一 个 显示 着 文本 消 
“a gentle reminder” 的 alert 对 话 框 。 


在 “购物 清单 ”文件 里 只 有 一 个 <p> 元 素 ， 并 且 它 有 title 属性 。 假 
如 这 份 文档 有 更 多 个 <p> 元 素 ， 并 且 它 们 没有 title 属性 ， 
则 getAttribute("title") 方法 会 返回 null 值 。 el 


E, null 的 含义 是 “没有 值 >。 把 下 面 代 码 添加 到 “购物 清单 ”文件 
中 的 现 有 


标签 之 后 : 


<p>This is just a test</p> 





重新 加 载 这 个 页 面 。 这 一 次 ， 你 将 看 到 两 个 alert 对 话 框 ， 而 第 二 
个 对 话 框 将 是 一 片 空白 或 者 是 只 显示 着 单词 cnull*， 这 取决 于 你 使 
用 是 哪 种 web 浏览 器 。 


我 们 可 以 修改 脚本 ， 让 它 只 在 title 属性 有 值 时 才 弹 出 消息 。 我 们 
将 增加 一 条 if 语句 来 检查 getAttribute 的 返回 值 是 不 是 nul1 。 
趁 痢 这 个 机 会 ， 我 们 顺便 增加 几 个 变量 以 提高 脚本 的 可 读 性 。 








var paras = document.getElementsByTagName("p") ; 
for (var i20; i< paras.length; i++) { 
var title text - paras[i].getAttribute("title"); 
if (title text !- null) { 
alert(title text); 





现在 重新 加 载 这 个 页 面 ， 你 会 看 到 一 个 显示 着 “a gentle reminder” 
轧 的 alert 对 话 框 ， 如 图 3-7 所 示 。 





Done 
图 3-7 


我 们 甚至 可 以 把 这 段 代 码 缩 得 更 短 一 些 。 当 检查 某 项 数据 是 否 
是 null 值 时 ， 我 们 其 实 是 在 检查 它 是 否 存在 。 这 种 检查 可 以 简化 
为 直接 把 被 检查 的 数据 用 作 if 语句 的 条 件 。if (something) 
与 if (something !- null) 完全 等 价 ， 但 前 者 显然 更 为 简明 。 
此 时 ， 如 果 something FÆ, Mif 语句 的 条 件 将 为 真 ， 如 果 
something 不 存在 ， 则 if 语句 的 条 件 将 为 假 。 


具体 到 这 个 例子 ， 只 要 我 们 把 if (title text != null) 替换 
为 if (title text), ， 我 们 就 可 以 得 到 更 简明 的 代码 。 此 外 ， 为 
了 进一步 增加 代码 的 可 读 性 ， 我 们 还 可 以 趁 此 机 会 把 alert 语句 
E PP 这 可 以 让 它们 更 接近 于 我 们 日 常生 活 中 
JE A : 











var paras = document.getElementsByTagName( "p"); 
for (var i20; i< paras.length; i++) { 
var title text - paras[i].getAttribute("title"); 
if (title text) alert(title text); 
} 


3.5.2 setAttribute 


此 前 介绍 的 所 有 方法 都 是 用 来 获取 信息 。setAttribute() 有 点 不 
同 : 它 人 允许 我 们 对 属性 节点 的 值 做 出 修改 。 与 getAttribute 一 
样 ，setAttribute 也 只 能 用 于 元 素 节点 : 








object.setAttribute(attribute, value) 





在 下 面 的 例子 里 ， 第 一 条 语句 得 到 id purchase 的 元 素 ， 第 二 
条 语句 把 cuum ie list of goods: 





var shopping - document.getElementById("purchases"); 
shopping.setAttribute("title","a list of goods"); 





我 们 可 以 利用 getAttribute 来 证 明 这 个 元 素 的 title 属性 值 确 实 
发 生 了 变化 : 


var shopping = document.getElementById("purchases"); 
alert (shopping.getAttribute("title")); 
shopping.setAttribute("title","a list of goods"); 
alert (shopping.getAttribute("title")); 





加 载 页 面 后 将 弹出 两 个 alert 对 话 框 : 第 一 个 alert 对 话 框 出 现 





fEsetAttribute 被 调用 之 前 ， 它 将 是 一 片 空白 或 显示 单 
词 “null*; 第 二 个 出 现在 设置 title 属性 值 之 后 ， 它 将 显示 “a list of 
goods” 消 息 。 


在 上 例 中 ， 我 们 设置 了 一 个 节点 的 title 属性 ， 这 个 属性 原先 并 不 
存在 。 这 表明 setAttribute 实际 完成 了 两 项 操作 : 先 创建 这 个 属 
性 ， 然 后 设置 它 的 值 。 如 果 setAttribute 用 在 一 个 本 身 就 有 这 个 
属性 的 元 素 节 点 上 ， 这 个 属性 的 值 就 会 被 覆盖 掉 。 


在 “购物 清单 ”示例 文档 里 ，<py> 元 素 已 经 有 了 一 个 title 属性 ， 这 
个 属性 的 值 是 a gentle reminder 。 可 以 用 setAttribute 来 改 
变 它 的 值 : 

















var paras = document.getElementsByTagName("p"); 
for (var i=@; i< paras.length; i++) { 
var title text = paras[i].getAttribute("title"); 
if (title text) { 
paras[i].setAttribute("title"," brand new title text"); 
alert(paras[i].getAttribute("title")); 


j 
} 








上 面 这 段 代 码 将 先 从 文档 里 获取 全 部 带 有 title 属性 的 <p> 元 素 ， 
然后 把 它们 的 title 属性 值 都 修改 为 brand new title text. 
对 “购物 清单 ”文件 来 说 ， 属 性 值 a gentle reminder SWA 5. 


这 里 有 一 个 非常 值得 关注 的 细节 : 通过 setAttribute 对 文档 做 出 
修改 后 ， 在 通过 浏览 器 的 view source (查看 源 代码 ) 选项 去 查看 文 
档 的 源 代 码 时 看 到 的 仍 将 是 改变 前 的 属性 值 ， 也 就 是 

说 ，setAttribute 做 出 的 修改 不 会 反映 在 文档 本 身 的 源 代码 里 。 
这 种 “ 表 里 不 一 ”的 现象 源 自 DOM 的 工作 模式 : 先 加 载 文 档 的 静态 
内 容 ， 再 动态 刷新 ， 动 态 刷 新 不 影响 文档 的 静态 内 容 。 这 正 是 
eee 对 页 面 内 容 进行 刷新 却 不 需要 在 浏览 器 里 刷新 
pu o 








3.6 小结 
本 章 介绍 了 DOM 提 供 的 五 个 方法 : 


getElementById 
getElementsByTagName 
getElementsByClassName 
getAttribute 
setAttribute 


这 五 个 方法 是 将 要 编写 的 许多 DOM 脚 本 的 基石 。 


DOM 还 提供 了 许多 其 他 的 属性 和 方法 ， 如 nodeName . nodeValue 
. childNodes . nextSibling 和 parentNode 等 ， 这 里 仅 举 这 人 么 
几 个 例子 。 在 后 面 需 要 的 时 候 我 会 详细 介绍 它们 。 我 现在 就 提 到 它 
们 主要 是 为 了 吊 吊 大 家 的 骨 口 。 


本 章 内 容 偏重 于 理论 。 在 看 过 那么 多 的 alert 对 话 杠 之后， 相信 大 
家 都 迫不及待 地 想 通 过 一 些 其 他 东西 进一步 了 解 和 测试 DOM， 而 
我 也 正 想 通过 一 个 案例 来 进一步 展示 DOM 的 强大 威力 。 在 下 一 章 
中 ， 我 将 带领 大 家 利用 本 章 介 绍 的 DOM 方 法 去 创建 一 个 基于 
JavaScript 的 图 片 库 。 





第 4 章 ”案例 研究 : JavaScript 
图 厂 库 


本 章 内 容 


。 编写 一 个 优秀 的 标记 文件 。 

。 编写 一 个 JavaScript 函 数 以 显示 用 户 想 要 得 看 的 图 片 。 
e 由 标记 触发 函数 调用 。 

。 使 用 几 个 新 方法 扩展 这 个 JavaScript 函 数 。 


现在 ， 是 时 候 让 DOM 去 做 些 事 了 。 在 这 一 章 中 ， 我 将 带领 大 家 用 
JavaScript 和 DOM 去 建立 一 个 图 片 库 。 


把 图 片 发 布 到 网 上 的 办 法 很 多 。 你 可 以 简单 地 把 所 有 的 图 片 都 放 到 
一 个 网 页 里 。 不 过 ， 如 果 打 算 发 布 的 图 片 比较 多 ， 这 个 页 面 很 快 就 
会 很 快 变 得 过 于 庞大 。 要 知道 ， 虽 然 网 页 标记 代码 没有 多 大 ， 但 加 
上 那些 图 片 后 用 户 要 下 载 的 数据 量 束 相当 可 观 了 。 我 们 必须 面 对 这 
样 一 个 现实 ; 没有 人 愿意 等 每 很 长 很 长 的 时 间 去 下 载 一 个 网 页 。 


因此 ， 为 每 张 图 片 分 别 创建 一 个 网 页 的 解决 方 采 值得 考虑 。 这 样 你 
的 图 片 库 将 不 再 是 一 个 体积 庞大 、 难 以 下 载 的 网 页 ， 而 变 成 了 许多 
个 尺寸 合理 、 便 于 下 载 和 浏览 的 页 面 。 不 过 ， 这 一 解决 方案 并 非 尽 
善 尽 闫 。 首 和 完 ， 为 每 张 图 片 分 别 制作 一 个 网 页 需要 花费 很 多 很 多 的 
时 间 ; 其 次 ， 每 个 网 页 上 应 该 提供 菜 种 导航 链接 来 给 出 当前 图 片 在 
整个 图 片 库 里 的 位 置 ， 方 便 人 们 从 当前 图 片 转 到 其 他 的 图 片 。 


如 果 想 两 全 其 美 ， 利 用 JavaScript 来 创建 图 片 库 将 是 最 佳 的 选择 把 
整个 图 片 库 的 浏览 链接 集中 安排 在 图 片 库 主 页 里 ， 只 在 用 户 点 击 了 
这 个 主页 里 的 某 个 图 片 链 接 时 才 把 相应 的 图 片 传送 给 他 。 


























41 标记 


为 了 完成 JavaScript 图 片 库 ， 我 特意 用 数码 相机 拍摄 了 几 张 照片 ， 并 
把 它们 修整 成 最 适合 于 用 浏览 器 来 查看 的 尺寸 ， 即 400 像 素 宽 x300 
像素 高 。 在 你 自己 做 练习 时 ,大 可 不 必 拘 泥 于 这 个 尺寸 ， 你 可 以 使 
用 任何 图 片 。 


一 项 工作 是 为 这 些 图 片 创建 一 个 链接 清单 。 因 为 我 没 打算 让 这 些 
图 片 按照 特定 顺序 排列 ， 所 以 将 使 用 一 个 无 序 清单 元 素 ul> ) 
来 列 出 那些 链接 。 如 果 你 自己 的 图 片 已 事先 排 好 序 ， 那 就 最 好 使 用 
一 个 有 序 清单 元 素 (<ol> ) 来 标记 这 些 图 片 链接 。 


下 面 是 我 的 标记 清单 : 











«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /» 
«title»Image Gallery«/title» 
«/head» 
«body» 
«h1»Snapshots«/h1» 
«ul» 
«li» 
«a href="images/fireworks.jpg" title-"A fireworks display"> Fire 
</li> 
<li> 


«a href="images/coffee.jpg" title="A cup of black coffee"> Coffe 
</li> 
<li> 


<a href="images/rose.jpg" title="A red, red rose">Rose</a> 
</li> 
<li> 
«a href="images/bigben.jpg" title="The famous clock"» Big Ben«/a 
</li> 
</ul> 
</body> 
</html> 





我 将 把 这 些 标记 保存 到 gallery .html 文件 ， 并 把 图 片 集中 保存 在 
目录 images 里 。 我 的 images 日 录 和 gallery .html 文件 位 于 同一 
个 目录 下 。 在 gallery.html 文件 里 ， 无 序 清 单元 素 中 的 每 个 链接 
分 别 指向 不 同 的 图 片 。 在 浏览 副 窗 口 里 点 击 茶 个 链接 束 可 以 转 到 相 
应 的 图 片 ， 但 从 图 片 重新 返回 到 链接 清单 目前 还 必须 借助 于 浏览 器 

的 Back( 后 退 〉 按钮 。 图 4-1 是 这 个 基本 的 链接 清单 在 浏览 器 窗口 

里 的 显示 效果 。 





Image Gallery 
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图 4-1 





这 是 一 个 相当 令 人 满意 的 网 页 ， 但 它 的 默认 行为 还 不 太 理想 。 下 面 
是 我 希望 改进 的 几 个 地 方 。 


e 当 点 击 茶 个 链接 时 ， 我 希望 能 留 在 这 个 网 页 而 不 是 转 到 为 一 个 
窗口 。 


。 当 点 汕 其 个 链接 时 ， 我 希望 能 在 这 个 网 页 上 同时 看 到 那 张 图 厂 
以 及 原 有 的 图 片 清单 。 





下 面 是 我 为 了 实现 上 述 目标 而 需要 完成 的 几 项 改进 。 


。 通过 增加 一 个 “ 占 位 符 ” 图 片 的 办 法 在 这 个 主页 上 为 图 片 预 留 一 
个 浏览 区 域 。 
e 在 点 击 东 个 链接 时 ， 拦 截 这 个 网 页 的 默认 行为 。 
e 在 反击 条 个 链接 时 ， 把 “ 占 位 符 ” 图 片 丛 换 为 与 那个 链接 相对 应 
的 图 片 。 
先 来 解决 “ 占 位 符 ” 图 片 的 问题 。 我 选用 了 一 个 类 似 于 名 片 的 图 片 ， 
你 可 以 根据 个 人 喜好 来 决定 选用 的 图 片 ， 即 使 选用 一 个 空白 图 片 也 


没 问题 。 


把 下 面 这 些 代码 插入 到 图 片 清 单 的 末尾 : 








«img id-"placeholder" src="images/placeholder.gif" alt-"my image galle 





我 对 这 个 图 片 的 id 属性 进行 了 设置 ， 这 将 使 我 可 以 通过 一 个 外 部 
的 样式 表 对 图 片 的 显示 位 置 和 显示 效果 加 以 控制 。 例 如 ， 可 以 让 这 
个 图 片 出 现在 链接 清单 的 劳 边 而 不 是 它 的 下 方 ， 还 可 以 在 自己 的 

JavaScript 代 码 里 使 用 这 个 id 值 。 下 面 是 这 个 页 面 在 增加 了 “ 占 位 

符 " 图 片 后 的 显示 效果 。 














图 4-2 
现在 ， 标 记 文 件 已 经 准备 好 了 ， 接 下 来 的 工作 是 编写 JavaScript 代 





4.2 JavaScript 


为 了 把 “ 占 位 符 ? 图 片 替 换 为 想 要 查看 的 图 片 ， 需 要 改变 它 的 src JB 
性 。setAttribute 是 完成 这 项 工作 的 最 佳 选择 ， 而 我 将 利用 这 个 
方法 写 一 个 函数 。 这 个 函数 只 有 一 个 参数 ， 即 一 个 图 片 链接 。 它 通 
过 改变 “ 占 位 符 ” 图 片 的 src 属性 的 办 法 将 其 答 换 为 参数 图 片 。 

首先 ， 需 要 给 函数 起 一 个 好 名 字 ， 它 应 能 描述 这 个 函数 的 用 途 ， 还 
要 简明 扼要 。 我 决定 把 这 个 函数 命名 为 showPic 。 还 需要 给 这 个 函 
数 的 参数 起 一 个 名 字 ， 我 决定 把 它 命名 为 whichpic : 











function showPic(whichpic) 








whichpic 代表 着 一 个 元 素 节 点 ， 有 具体 地 说 ， 那 是 一 个 指 同 某 个 图 
片 的 <ay> 元 素 。 我 需要 分 解 出 图 片 的 文件 路 径 ， 这 可 以 通过 

在 whichpic 元 素 上 调用 getAttribute 得 到 ， 只 要 把 "href" 作为 
参数 传递 给 getAttribute 就 行 了 : 


whichpic.getAttribute("href") 





我 将 把 这 个 路 径 存 入 变量 source : 


var source = whichpic.getAttribute("href"); 





接 下 来 ， 还 需要 获取 “ 占 位 符 ” 图 片 ， 这 对 getElementById 来 说 不 
过 是 小 菜 一 人 碟 : 


document .getElementById("placeholder") 


我 不 想 重 复 敲 入 “document.getElementById("placeholder") 
”这 么 长 的 字符 串 ， 所 以 将 把 这 个 元 素 赋 给 变量 placeholder : 


var placeholder = document.getElementById("placeholder"); 





现在 ， 已 经 声明 并 赋值 了 两 个 变量 : source fliplaceholder. Č 
们 可 以 让 脚本 简明 易 读 。 


我 将 使 用 setAttribute 对 placeholder 元 素 的 src 属性 进行 刷 
新 。 还 记得 吗 ， 这 个 方法 有 两 个 参数 : 一 个 是 属性 名 ， 另 一 个 是 属 
性 的 值 。 具 体 到 这 个 例子 ， 因 为 我 想 对 src 属性 进行 设置 ， 所 以 第 
一 个 参数 是 "src" ; 至 于 第 二 个 参数 ， 也 就 是 src 属性 的 值 ， 我 已 
经 把 它 保 存在 source 变量 里 了 : 


placeholder.setAttribute("src",source); 








这 显然 要 比 下 面 这 么 元 长 的 代码 更 容易 阅读 和 理解 : 


document. getElementById("placeholder").setAttribute("src", 
æ whichpic.getAttribute("href")); 





4.2.1 非 DOM 解 决 方案 
其 实 ， 不 使 用 setAttribute 方法 也 可 以 改变 图 片 的 src 属性 。 


setAttribute 方法 是 “第 1 级 DOM” (DOM Level 1) 的 组 成 部 分 ， 








它 可 以 设置 任意 元 系 节 点 的 任意 属性 。 在 “第 1 级 DOM2” 出 现 之 前 ， 
你 可 以 通过 另外 一 种 办 法 设置 大 部 分 元 系 的 属性 ， 这 个 办 法 到 现在 


仍然 有 效 。 
例如 ， 如 果 想 改变 某 个 input 元 素 的 value 属性 ， 可 以 这 样 : 


element.value = "the new value" 


这 与 下 面 这 条 语句 的 效果 是 等 价 的 : 





element.setAttribute("value","the new value"); 





类 似 的 办 法 也 可 以 用 来 改变 图 片 的 src 属性 。 例 如 ， 在 我 的 图 片 库 
脚本 里 ， 完 全 可 以 用 下 面 这 条 语句 来 代替 setAttribute : 


placeholder.src = source; 


我 个 人 更 喜欢 使 用 setAttribute 。 起 码 不 必 费 心 去 记忆 哪些 元 素 
的 哪些 属性 可 以 用 DOM 之 前 的 哪些 方法 去 设置 。 虽 然 用 那些 老 办 
法 可 以 训 无 问题 地 对 文档 里 的 图 片 、 表 单 和 其 他 一 些 元 素 的 属性 进 
行 设 置 ， 但 setAttribute 的 优势 在 于 它 可 以 修改 文档 中 的 任何 一 
个 元 素 的 任何 一 个 属性 。 


“第 1 级 DOM” 的 为 一 个 优势 是 可 移植 性 更 好 。 那 些 老 方法 只 适用 于 
Web 文 档 ，DOM 则 运用 于 任何 一 种 标记 语言 。 虽 然 这 种 差异 对 我 
们 这 个 例子 没有 影响 ， 但 我 希望 大 家 能 够 年 牢 记 住 这 一 点 : DOM 
征 一 种 适用 于 多 种 环境 和 多 种 程序 设计 语言 的 通用 型 API。 如 果 想 
把 从 本 书 学 到 的 DOM 技 巧 运 用 在 Web 浏 览 器 以 外 的 应 用 环境 里 ， 
严格 遵守 “第 1 级 DOM” 能 够 让 你 避免 与 兼容 性 有 关 的 任何 问题 。 


42.2 最终 的 函数 代码 清单 








下 面 是 showPic 函数 完整 的 代码 清单 : 


function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder. setAttribute("src",source); 


} 





接 下 来 的 任务 是 把 这 个 JavaScript 函 数 与 标记 文档 结合 起 来 。 


43 MHIX JavaScript K 2 


PRESS. Be ROR BETES EAE. TER SPR URE 
在 扩展 名 为 .js 的 文本 文件 中 。 在 此 ， 可 以 给 它 起 个 名 字 叫 


showPic.js 。 


知 一 个 站 点 用 到 多 个 JavaScript 文 件 ， 为 了 减少 对 站 点 的 请 求 次 
数 〈 提 高 性 能 ) ， 应 该 把 这 些 js 文件 合并 到 一 个 文件 中 。 本 
书 为 了 便于 说 明 问 题 ， 不 少 例子 都 使 用 了 多 个 文件 。 等 到 了 第 
我 们 会 专门 讨论 这 个 问题 以 及 其 他 提升 站 点 性 能 的 最 佳 
实践 。 


就 像 我 刚才 决定 把 所 有 的 图 片 集中 存放 在 ijmages T Hox E, 
把 所 有 的 JavaScript 脚 本 文件 集中 存放 在 一 个 子 目录 里 也 是 个 好 主 

P MEL 的 子 目 录 并 把 showPic .js 文件 保 
子 到 其 中 。 


现在 ， 需 要 在 图 片 库 文档 里 插入 一 个 链接 来 引用 这 个 JavaScript 脚 本 
文件 。 我 将 把 下 面 这 行 插入 到 HTML 文 档 的 </body> 标签 之 前 : 





<script type-"text/javascript" src="scripts/showPic.js"></script> 





这 样 在 图 片 库 文档 里 就 可 以 使 用 showPic 函数 了 。 如 果 到 此 打 
住 ， 那 么 showPic 函数 永远 也 不 会 被 调用 。 我 们 需要 给 图 片 列表 的 
pene 也 就 是 事件 处 理 函 数 (event handler) ， 才 能 达成 
目标 。 


事件 处 理 函 数 


事件 处 理 函 数 的 作用 是 ， 在 特定 事件 发 生 时 调用 特定 的 JavaScript 代 
码 。 例 如 ， 如 果 想 在 鼠标 指针 悬 停 在 某 个 元 素 上 时 触发 一 个 动作 ， 
就 需要 使 用 onmouseover 事件 处 理 函 数 : 如 果 想 在 鼠标 指针 离开 
某 个 元 素 时 触发 一 个 动作 ， 就 需要 使 用 onmouseout 事件 处 理 函 
数 。 在 我 的 图 片 库 里 ， 我 想 在 用 户 点 击 某 个 链接 时 触发 一 个 动作 ， 











所 以 需要 使 用 onclick 事件 处 理 函 数 。 

需要 注意 的 是 showPic() 函数 需要 一 个 参数 : 一 个 带 有 href 属性 
的 元 素 节 点 参数 。 当 我 把 onclick 事件 处 理 函 数 佑 入 到 一 个 链接 中 
时 ， 需 要 把 这 个 链接 本 喘 用 作 showPic 函数 的 参数 。 

有 个 非常 简单 有 效 的 办 法 可 以 做 到 这 一 点 : 使 用 this 关键 字 。 这 
个 关键 字 在 这 儿 的 含义 是 “这 个 对 象 ”。 有 具体 到 当前 的 例子 ，this 
表示 “这 个 <a> 元 素 节 点 ”: 


showPic(this) 


综 上 所 述 ， 我 将 使 用 onclick 事件 处 理 函 数 来 给 链接 添加 行为 。 添 
加 事件 处 理 函数 的 语法 如 下 所 示 : 


event = "JavaScript statement(s)" 


请 注意 ，JavaScript 代 码 包含 在 一 对 引号 之 间 。 我 们 可 以 把 任意 数量 
的 JavaScript 语 句 放 在 这 对 引号 之 闻 ， 只 要 把 各 条 语句 用 分 号 隔 开 即 
可 。 














下 面 这 样 onclick 事件 就 可 以 调用 showPic 方法 了 : 


onclick = "showPic(this);" 


ANIL, GAR USE SHUT RET ER HB Tr SE “EB, BRANT 
会 过 到 一 个 问题 : 点 击 这 个 链接 时 ， 不 仅 showPic 函数 被 调用 ， 
链接 被 点 击 的 默认 行为 也 会 被 调用 。 这 意味 着用 户 还 是 会 被 带 到 图 
oe 而 这 是 我 不 希望 友 生 的 。 我 需要 阻止 这 个 默认 行为 被 
调用 。 

















让 我 们 近 距 离 了 解 一 下 事件 处 理 函 数 的 工作 机 制 。 在 给 某 个 元 素 添 
加 了 事件 处 理 函 数 后 ， 一 旦 事件 发 生 ， 相 应 的 JavaScript 代 码 束 会 得 
到 执行 。 被 调用 的 JavaScript 代 码 可 以 返回 一 个 值 ， 这 个 值 将 被 传递 
给 那个 事件 处 理 函 数 。 例 如 ， 我 们 可 以 给 某 个 链接 添加 一 

个 onclick 事件 处 理 函 数 ， 并 让 这 个 处 理 函 数 所 触发 的 JavaScript 
代码 返回 布尔 值 true 或 false 。 这 样 一 来 ， 当 这 个 链接 被 点 击 
时 ， 如 果 那 段 JavaScript 代 码 返 回 的 值 是 true , onclick 事件 处 理 
函数 就 认为 “这 个 链接 被 点 击 了 ”上 反之， 如 果 返 回 的 值 是 false 

» onclick 事件 处 理 函 数 就 认为 “这 个 链接 没有 被 点 击 ”。 


可 以 通过 下 面 这 个 简单 测试 去 验证 这 一 结论 : 





«a href="http://www.example.com" onclick="return false;">Click me</a> 





当 点 击 这 个 链接 时 ， 因 为 onclick 事件 处 理 函 数 所 触发 的 
2 eee 的 值 是 false ， 所 以 这 个 链接 的 默认 行为 没 
被 触发 。 


同样 道理 ， 如 果 像 下 面 这 样 ， 在 onclick 事件 处 理 函 数 所 触发 的 
JavaScript 代 码 里 增加 一 条 return false 语句 ， 就 可 以 防止 用 户 被 
带 到 目标 链接 窗口 : 





onclick = "showPic(this); return false;" 





1E NS 完成 的 onclick 事件 处 理 函 数 在 图 片 库 HTML 文 档 里 的 
vy. 


«li» 

«a hrefz"images/fireworks.jpg" onclick="showPic(this) ; 
æ return false;" title-"A fireworks display">Fireworks</a> 
</li> 
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件 处 理 函 数 之 后 的 样子 : 


«li» 
<a hrefz"images/fireworks.jpg" onclick="showPic(this) ; 
æ return false;" title="A fireworks display">Fireworks</a> 
</li> 
<li> 
<a href="images/coffee. jpg" onclick-"showPic(this); 
æ return false;" title="A cup of black coffee">Coffee</a> 
</li> 
<li> 
<a href="images/rose.jpg" onclick="showPic(this); return false;" 


= title="A red, red rose">Rose</a> 
</li> 
<li> 
<a href="images/bigben.jpg" onclick="showPic(this); return false;" 
æ title="The famous clock">Big Ben</a> 
</li> 





现在 ， 把 这 个 页 面 加 载 到 Web 浏 览 器 里 ， 你 将 看 到 一 个 能 够 正常 工 
作 的 “JavaScript 图 片 库 ”: 如 图 4-3 所 示 ， 不 管 点 击 图 片 列表 里 的 哪 
个 链接 ， 都 能 在 这 个 页 面 里 看 到 相应 的 图 片 。 


44 对 这 个 函数 进行 扩展 


在 一 个 网 页 上 切换 显示 不 同 的 图 片 并 不 是 什么 新 鲜 事 。 早 在 W3C 推 
出 它们 标准 化 的 DOM 和 JavaScript 语 言 之 前 ， 有 着 这 类 效果 的 网 页 
和 脚本 就 已 经 出 现 了 ， 如 今 更 是 得 到 了 广泛 的 流行 。 


在 这 种 情形 下 ， 如 果 想 让 自己 与 众 不 同 ， 就 必须 另辟蹊径 。 有 没有 
想 过 在 同一 个 网 页 上 切换 显示 不 同 的 文本 ? 利用 JavaScript 语 言 和 
DOM， 确 实 可 以 做 到 这 一 点 。 


图 片 库 文档 里 的 每 个 图 片 链接 都 有 一 个 title 属性 。 可 以 把 这 个 属 
性 取出 来 并 让 它 和 相应 的 图 片 一 同 显 示 在 网 页 上 。title 属性 的 值 
可 以 用 getAttribute 轻而易举 地 得 到 : 

















var text = whichpic.getAttribute("title"); 





光 提 取 title 属性 的 值 还 不 够 ， 我 们 还 需要 把 它 插入 到 HTML 文 档 
中 。 为 完成 这 一 工作 ， 我 需要 用 到 几 个 新 的 DOM 属 性 。 


4.4.1 childNodes 属性 


(E— BMW AME DL, childNodes 属性 可 以 用 来 获取 任何 一 个 元 素 的 
所 有 子 元 素 ， 它 是 一 个 包含 这 个 元 系 全 部 子 元 素 的 数组 : 


element.childNodes 


假设 需要 把 某 个 文档 的 body 元 素 的 全 体 子 元 素 检索 出 来 。 首 移 ， 

我 们 使 用 getElementsByTagName 得 到 body 元 素 。 因 为 每 份 文档 
只 有 一 个 body 元 素 ， 所 以 它 将 

E.getElementsByTagName("' 'body" ) 方法 所 返回 的 数组 中 的 第 一 

个 信也 是 唯一 一 人 元素 











var body element = document. getElementsByTagName("body")[@]; 





现在 ， 变 量 body_element 已 经 指向 了 那个 文档 的 body 元 素 。 接 
下 来 ， 可 以 用 如 下 所 示 的 语法 获取 body 元 素 的 全 体 子 元 素 : 





body_element.childNodes 





这 显然 要 比 像 下 面 这 样 写 简明 得 多 : 


document. getElementsByTagName("body")[@].childNodes 





现在 ， 已 经 知道 如 何 获取 body 元 素 的 全 体 子 元 素 了 ， 接 下 来 看 看 
这 些 信息 的 用 途 。 


首先 ， 可 以 精确 地 查 出 body 元 素 一 共有 多 少 个 子 元 素 。 
为 childNodes 属性 返回 的 是 一 个 数组 ， 所 以 用 数组 的 length 属 
性 就 可 以 知道 它 所 包含 的 元 素 的 个 数 : 


body_element.childNodes. length; 





现在 把 下 面 这 个 小 函数 添加 到 showPic.js XE: 


function countBodyChildren() { 
var body element = document.getElementsByTagName("body")[0]; 
alert (body element.childNodes.length); 


} 





这 个 简单 的 小 函数 将 弹出 一 个 alert 对 话 框 ， 显 示 body 元 素 的 子 
元 素 的 总 个 数 。 


我 想 让 这 个 函数 在 页 面 加 载 时 执行 ， 而 这 需要 使 用 onload 事件 处 
理 函 数 。 把 下 面 这 条 语句 添加 到 代码 段 的 末尾 : 


window.onload = countBodyChildren; 


这 条 语句 的 作用 是 在 页 面 加 载 时 调用 countBodyChildren 函数 。 


在 web 浏览 器 里 刷新 gallery .html 文件 。 你 会 看 到 一 个 alert 对 
话 框 ， 其 显示 的 内 容 是 body 元 素 的 子 元 素 的 总 个 数 。 这 个 数字 很 
可 能 会 让 你 大 吃 一 惊 。 











4.4.2 nodeType 属性 


根据 gallery .html 文件 的 结构 ，body 元 素 应 该 只 有 3 个 子 元 素 : 
— hl Joss 一 个 ul 元 条 和 一 个 jmeg go ass. HI 

是 ，countBodyChildren() 函数 给 出 来 的 数字 却 远 大 于 此 ， 这 是 
因为 文档 树 的 节点 类 型 并 非 只 有 元 素 节 点 一 种 。 

由 childNodes 属性 返回 的 数组 包含 所 有 类 型 的 节点 ， 而 不 仅仅 是 
元 素 节 点 。 事 实 上 ， 文 档 里 几乎 每 一 样 东 西 都 是 一 个 节点 ， 其 至 连 
空格 和 换行 符 都 会 被 解释 为 节点 ， 而 它们 也 全 都 包含 

在 childNodes 属性 所 返回 的 数组 当中 。 

因此 ，countBodyChildren 的 返回 结果 才 会 这 么 大 。 

还 好 ， 每 一 个 节点 都 有 nodeType 属性 。 这 个 属性 可 以 让 我 们 知道 
自己 正在 与 哪 一 种 节点 打交道 ， 差 劲 的 一 点 是 nodeType 的 值 并 不 
是 英文 。 

用 下 面 的 语法 获取 节点 的 nodeType 属性 : 


node.nodeType 


























nodeType 的 值 是 一 个 数字 而 不 是 像 “element” 或 “attribute” 那 样 的 身 
文字 符 串 。 


为 了 验证 这 一 点 ， 把 countBodyChildren 中 的 alert 语句 替换 为 
下 面 这 条 语句 ， 这 样 一 来 ， 我 们 就 可 以 知道 body_element 元 素 的 
nodeType 属性 了 : 


alert(body element.nodeType); 








在 Web 浏 览 器 里 刷新 gallery.html 文件 ， 将 看 到 一 个 显示 数 
字 “1” 的 alert 对 话 框 。 换 名 话说， 元 素 节 点 的 nodeType 属性 值 是 
Ls 


nodeType 属性 总 共有 12 种 可 取 值 ， 但 其 中 仅 有 3 种 具有 实用 价值 。 
。 元 素 节点 的 nodeType 属性 值 是 1。 
e 属性 节点 的 nodeType 属性 值 是 2。 
e 文本 节点 的 nodeType 属性 值 是 3。 


这 就 意味 着 ， 可 以 让 函数 只 对 特定 类 型 的 市 点 进 行 处 理 。 例 如 ， 完 
全 可 以 编写 出 一 个 只 处 理 元 又 节点 的 函数 。 


4.4.3 ”在 标记 里 增加 一 段 描述 


为 增强 我 的 图 片 库 函 数 ， 我 决定 维护 一 个 文本 节点 。 我 想 在 显示 图 
片 时 ， 把 这 个 文本 节点 的 值 蔡 换 成 目标 图 片 链接 的 title 的 值 。 


首先 ， 需 要 为 目标 文本 安排 显示 位 置 。 我 在 gallery .html 文件 里 


增加 一 个 新 的 文本 段 。 我 把 它 安排 在 <img> 标签 之 后 ， 为 它 设置 一 
个 独一无二 的 id 值 ， 这 样 就 能 在 JavaScript 函 数 里 方便 地 引用 它 : 


«p id-"description"»Choose an image.</p> 




















上 面 这 条 语句 将 把 <p> 元 素 的 id 属性 设置 为 description (fii 
述 ) ， 这 个 id 可 以 让 这 个 元 素 的 用 途 一 目 了 然 。 如 图 4-4 所 示 ， 包 
含 在 此 元 素 里 的 文本 现在 是 “Choose an image.”， 你 能 看 到 添加 了 新 
段落 。 


Image 
Gallery 


Choose an image. 





图 4-4 


我 想 达 到 的 效果 是 : 在 某 个 图 片 链接 被 点 击 时 ， 不 仅 要 把 “ 占 位 
符 ” 图 片 蔡 换 为 那个 链接 的 href 属性 所 指 癌 的 图 片 ， 还 要 把 这 上 段 文 
本 同时 替换 为 那个 图 片 链接 的 title 属性 值 。 为 了 实现 这 一 效果 ， 
对 showPic 函数 要 做 一 些 改进 。 


4.4.4 用 JavaScript 改 变 这 段 描 述 





在 图 片 链接 被 点 击 时 ， 为 了 能 动态 地 用 图 片 的 title Ase wi 
明 ， 我 需要 对 showpic É 函数 做 一 些 修改 。 


下 面 是 showPic 函数 现在 的 样子 : 


function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder. setAttribute("src",source); 


} 





首先 ， 我 需要 在 showPic() 函数 里 增加 一 条 语句 来 获取 whichpic 
对 象 的 title 属性 值 。 我 将 把 这 个 值 存 入 text 变量 。 这 件 事 可 以 
轻而易举 地 利用 getAttribute 完成 : 


var text = whichpic.getAttribute("title"); 





接 下 来 ， 为 了 能 方便 地 引用 id 为 description 的 文本 段落 ， 我 创 
建 一 个 新 的 变量 来 存放 它 : 





var description = document.getElementById("description"); 





下 面 是 增加 变量 之 后 的 样子 : 





function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 


| | 
下 一 个 任务 是 实现 文本 的 切换 。 
4.4.5 nodeValue 属性 


如 果 想 改变 一 个 文本 节点 的 值 ， 那 就 使 用 DOM 提 供 的 nodeValue 
属性 ， 它 用 来 得 到 (和 设置 ) 一 个 节点 的 值 : 


node.nodeValue 





但 这 里 有 个 大 家 必须 注意 的 细节 : 在 用 nodeValue 属性 获取 
description 对 象 的 值 时 ， 得 到 的 并 不 是 包含 在 这 个 段落 里 的 文 
本 。 可 以 用 下 面 这 条 alert 语句 来 验证 这 一 点 : 





alert (description.nodeValue); 





这 个 调用 将 返回 一 个 null 值 。<p> 元 素 本 身 的 nodeValue 属性 是 





一 个 空 值 ， 而 你 真正 需要 的 是 <p> 元 素 所 包含 的 文本 的 值 。 
包含 在 <p> 元 素 里 的 文本 是 男 一 种 节点 ， 它 是 <p> 元 素 的 第 一 个 子 
节点 。 因 此 ， 你 想 要 得 到 的 其 实 是 它 的 第 一 个 子 节点 的 nodeValue 
属性 值 。 


下 面 这 条 alert 语句 可 以 显示 你 想 要 的 内 容 : 





alert(description.childNodes[@].nodeValue) ; 





这 个 调用 的 返回 值 才 是 我 们 正在 寻找 的 “Choose an image.”. 3x fü 
来 自 childNodes 数组 的 第 一 个 (下 标 是 0) 元 素 。 





4.4.6 firstChild flülastChild 属性 


EUH us childNodes [@] 有 个 更 直观 易 读 的 同义词 。 无 论 何 时 何 
地 ， 只 要 需要 访问 childNodes 数组 的 第 一 个 元 素 ， 都 可 以 把 它 写 
成 firstChild : 








node.firstChild 





这 种 写法 与 下 面 的 写法 完全 等 价 : 


node.childNodes[08] 








这 不 仅 更 加 简短 ， 还 更 加 具有 可 读 性 。 
DOM 还 提供 了 一 个 与 之 对 应 的 lastchild 属性 : 


node.lastChild 





这 代表 着 childNodes 数组 的 最 后 一 个 元 素 。 如 果 不 想 通过 
lastChild 属性 去 访问 这 个 节点 ， 将 不 得 不 使 用 如 下 所 示 的 语法 : 





node.childNodes[node.childNodes.length-1] 





与 简明 易 懂 的 lastCchild 相 比 ， 这 么 复杂 的 语法 记号 恐怕 没 人 会 
欢 。 


4.4.7 利用 nodeValue 属性 刷新 这 段 描述 


现在 ， 我 们 回 到 showPic 函数 。 我 将 刷新 id ST description 的 
«p» 元 素 所 包含 的 文本 节点 的 nodevValue 属性 。 


具体 到 这 个 id 等 于 description 的 <p> 元 素 ， 因 为 它 只 有 一 个 子 
节点 ， 所 以 选用 description.firstChild 属性 和 选 
Hidescription.lastChild 属性 的 效果 是 完全 一 样 的。 既然 如 
此 ， 我 决定 选用 firstchild 属性 。 


可 以 把 alert 语句 改写 为 如 下 所 示 的 样子 : 


alert(description.firstChild.nodeValue) ; 





显示 的 效果 完全 一 样 〈 都 将 显示 “Choose an image.” 消 息 ) ， 但 这 里 
的 代码 显然 更 容易 阅读 和 理解 。 


nodeValue 属性 的 用 途 并 非 仅 限于 些 。 它 不 仅 可 用 来 检索 节点 的 
值 ， 还 可 以 用 来 设置 节点 的 值 ， 后 一 种 用 途 正 是 我 目前 最 需要 的 。 


还 记得 刚才 在 showPic 函数 里 的 text 变量 吗 ? 当 图 片 库 页 面 上 的 
某 个 图 片 链接 被 点 击 时 ，showPic 函数 会 把 这 个 链接 的 title 属性 
值 传递 给 text 变量 。 而 我 现在 将 用 text 变量 去 刷新 id 值 等 于 
description 的 那个 <p> 元 素 的 第 一 个 子 节点 的 nodeValue 属性 
值 ， 如 下 所 示 : 











description.firstChild.nodeValue = text; 





下 面 是 为 了 改进 showPic() 函数 而 添加 的 三 条 新 语句 : 


var text = whichpic.getAttribute("title"); 
var description = document. getElementById("“description") ; 
description. firstChild.nodeValue = text; 





如 果 用 日 常用 语 来 说 ， 这 三 条 语句 的 含义 依次 是 : 


e 当 图 片 库 页 面 上 的 某 个 图 片 链接 被 点 击 时 ， 这 个 链接 的 title 
属性 值 将 被 提取 并 保存 到 text 变量 中 ; 

。 得 到 id "description" 的 <p> 元 素 ， 并 把 它 保 存 到 变量 
description 里 ; 

。 把 description 对 象 的 第 一 个 子 节点 的 nodeValue 属性 值 设 
置 为 变量 text 的 值 。 


下 面 是 最 终 的 代码 清单 : 








function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder. setAttribute("src",source); 
var text = whichpic.getAttribute("title") ; 


var description = document.getElementById("description"); 
description. firstChild.nodeValue = text; 





把 改进 后 的 showPic() 函数 存 入 showPic.js 文件 ， 然 后 在 浏览 器 
里 刷新 galLlery.html 文档 ， 你 就 可 以 看 到 这 个 扩展 功能 了 。 现 
在 ， 点 击 这 个 网 页 上 的 某 个 图 片 链接 时 ， 你 将 看 到 两 种 效果 :“ 占 
位 符 ” 图 片 被 蔡 换 为 这 个 链接 所 指 回 的 一 张 新 图 片 ， 同 时 摘 述 性 文 
字 也 被 蔡 换 为 这 个 链接 的 title 属性 值 ， 如 图 4-5 所 示 。 
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图 4-5 


你 可 以 在 http://friendsofed.cony 网 站 上 找到 图 片 库 脚 本 文件 和 标记 
文档 。 我 在 示例 中 用 到 的 所 有 图 片 也 可 以 在 那里 找到 ， 但 我 建议 大 
家 找 一 些 自己 的 图 片 来 测试 这 个 脚本 ， 那 样 会 更 有 意思 。 


如 果 想 让 这 个 图 片 库 更 美观 ， 可 以 再 给 它 增加 一 个 像 下 面 这 样 的 样 


X 











body ( 
font-family: "Helvetica","Arial",serif; 
color: #333; 
background-color: #ccc; 
margin: lem 10%; 


h1 { 
color: #333; 
background-color: transparent; 


} 


a { 
color: #c60; 
background-color: transparent; 
font-weight: bold; 
text-decoration: none; 

} 

ul { 
padding: 0; 

} 

li ( 
float: left; 
padding: 1em; 
list-style: none; 

} 

img { 
display:block; 
clear:both; 


} 





请 把 这 些 CSS 代 码 存 入 layout .css 文件 ， 并 把 这 个 文件 存放 


到 styles 子 目录 里 。 然 后 ， 在 gallery.html 文档 的 <head> 部 分 
用 一 个 <link> 标签 来 引用 这 个 文件 ， 如 下 所 示 : 





<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Image Gallery</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<h1>Snapshots</h1> 
<ul> 
«li» 
«a href-"images/fireworks.jpg" title-"A fireworks display' 
æ onclick-"showPic(this); return false;">Fireworks</a> 
</li> 
<li> 
«a href="images/coffee.jpg" title-"A cup of black coffee" 
æ onclick="showPic(this); return false;"»Coffee«/a» 
</li> 
<li> 
<a href="images/rose.jpg" title="A red, red rose" 


æ onclick="ShowPic(this); return false;">Rose</a> 
</li> 
<li> 
<a href="images/bigben.jpg" title="The famous clock" 
æ onclick="showPic(this); return false;">Big Ben</a> 
</li> 
</ul> 
<img id="placeholder" src="images/placeholder.gif" alt="my image gal 
<p id="description">Choose an image.</p> 
<script src="scripts/showPic.js"></script> 
</body> 
</html> 





图 4-6 是 图 片 库 的 显示 效果 。 
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45 ”小结 


本 章 介 绍 了 一 个 简单 的 JavaScript 应 用 案例 ， 还 介绍 了 DOM 提 供 的 
几 个 新 属性 ， 它 们 是 : 


childNodes 
nodeType 
nodeValue 
firstChild 
lastChild 


本 章 的 学 习 重 点 有 两 个 : 一 是 如 何 利 用 DOM 所 提供 的 方法 去 编写 
I ee 
成 在 一 起 。 


从 表面 上 看 ， 我 们 的 图 片 库 已 经 大 获 成 功 ， 但 它 实 际 上 还 有 许多 地 
方 值得 改进 ， 而 那 将 是 随后 两 昔 里 的 讨论 重点 。 


下 一 章 将 介绍 一 些 JavaScript 脚 本 编程 方面 的 最 佳 实践 ， 你 会 从 中 领 
悟 这 样 一 个 道理 : 达成 目标 的 过 程 与 目标 本 身 同 样 重要 。 


第 6 章 我 们 将 把 这 些 最 佳 编程 实践 应 用 到 图 片 库 脚本 上 。 








A^ ze. Ed /十 Ar DP 
"B 5 GRO RIEKE 
本 章 内 容 
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e 分 离 JavaScript: 把 网 页 的 结构 和 内 容 与 JavaScript 脚 本 的 


动作 行为 分 开 。 
e HERA: 确保 老 版 本 的 浏览 器 不 会 因为 你 的 JavaScript 
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。 性 能 考虑 : 确定 脚本 执行 的 性 能 最 优 。 


JavaScript 语 言 和 和 DOM 构成 了 一 个 功能 非常 强大 的 组 合 ， 但 问题 的 
关键 是 你 能 否 恰 到 好 处 地 运用 它们 所 提供 的 功能 。 本 章 将 介绍 一 些 
最 佳 实践 ， 帮 助 你 保证 编写 出 来 的 脚本 不 会 与 你 的 愿望 背道而驰 。 


5.1 过 去 的 错误 
在 讨论 最 佳 实践 之 前 ， 先 来 了 解 一 下 出 问题 的 原因 。 





5.1.1 ^ ZZ FE TE JavaScript 


易学 易 用 的 技术 就 像 一 把 双 刃 剑 。 因 为 容易 学 习 和 掌握 ， 它 们 往往 
会 在 很 短 的 时 间 内 束 为 人 们 广泛 接受 ,但 也 往往 意味 着 缺乏 高 水 平 
的 质量 控制 措施 。 


HTML 语 言 就 是 一 个 很 好 的 例子 。 万 维 网 之 所 以 会 出 现 爆 炸 性 的 增 

长 ，HTML 语 言 易学 易 用 的 特点 是 无 可 否认 的 一 个 原因 。 人 们 只 需 

人 花费 很 短 的 时 间 就 能 掌握 HTML 语 言 的 基本 知识 ， 并 迅速 地 创建 出 

各 种 各 样 的 网 页 。 事 实 上 ， 随 着 “所 见 即 所 得 ?网 页 设计 工具 的 出 现 
ZETA — i e 


因此 产生 的 一 个 不 良 后 果 是 ， 绝 大 多 数 网 页 都 编写 得 很 糟糕 ， 甚 至 
不 做 标记 合法 性 检查 。 因 此 ， 软 件 厂 商 不 得 不 让 它们 的 浏览 器 以 尽 
可 能 宽松 的 方式 去 处 理 网 页 。 每 种 浏览 器 都 有 相当 一 部 分 代码 专门 
用 来 处 理 那些 含糊 不 清 的 HTML 标记 ， 以 及 猜测 网 页 的 创作 者 们 到 
底 想 如 何 呈 现 网 页 。 


理论 上 讲 ， 在 如 今 的 web 上 有 数 十 亿 计 的 HIML 文 档 ， 但 事实 上 ， 
这 些 文档 中 只 有 一 少 部 分 有 着 良好 的 结构 。 这 种 历史 遗留 问题 使 得 
XHTML 和 CSS 等 新 技术 在 Web 上 的 推广 和 应 用 遇 到 了 很 大 的 阻 
力 。 易 学 易 用 的 HIML 语 言 既 是 万 维 网 的 福音 ， 又 是 它 的 璐 梦 。 


与 HIML 语 言 相 比 ，JavaScript 语 言 的 生存 环境 的 要 求 要 奇 刻 得 多 。 
如 果 JavaScript 代 人 码 不 符合 语法 规定 ，JavaScript 解 释 器 (对 Web 访 
用 而 言 束 是 浏览 器 〉 将 拒绝 执行 它们 并 报错 ; 而 浏览 器 在 过 到 不 符 
合 语法 规定 的 HIML 代 码 时 ， 则 会 千方百计 地 将 其 呈现 出 来 。 尽 管 
如 些 ， 在 如 今 的 Web 上 还 是 充斥 着 质量 低 筋 的 JavaScript 代 人 码 。 


许多 网 页 设计 者 并 不 舍得 花费 时 间 去 学 习 JavaScript 语 言 ， 而 只 是 把 
一 些 现成 的 JavaScript 代 码 直 接 雯 贴 到 HTML 文 档 里 以 使 网 页 更 加 让 






































富 多 彩 。 事 实 上 ，JavaScript 语 言 诞生 后 不 久 ， 市 场 上 整 出 现 了 许多 
能 让 人 们 把 JavaScript 代 码 厂 段 租 入 或 关联 到 HTML 文 档 的 “所 见 即 
所 得 ”的 网 页 设计 工具 。 


其 实 ， 即 使 没有 那些 “所 见 即 所 得 ”的 网 页 设计 工具 ， 把 JavaScript 代 
码 拒 入 或 关联 到 HTML 文档 也 不 是 难事 。 有 许多 网 站 和 书刊 专门 提 
供 各 种 现成 的 JavaScript 函 数 并 号 称 便于 使 用 。 一 时 间 ,“ 剪 切 和 粘 
贴 ”* 成 了 编写 JavaScript 脚 本 的 代名词 。 


不 幸 的 是 ， 这 些 现成 的 JavaScript 孙 数 里 有 很 多 对 问题 考虑 得 并 不 周 
全 。 从 表面 上 看 ， 它 们 都 能 完成 自己 的 任务 并 给 网 页 带 来 新 守 动 人 
的 交互 效果 ; 但 在 实际 应 用 中 ， 它 们 当中 只 有 很 少 一 部 分 能 够 在 
JavaScript 被 禁用 时 对 网 页 的 行为 做 出 妥善 的 安排 。 很 多 时 候 ， 一 旦 
浏览 器 不 支持 或 禁用 了 JavaScript 解 释 功 能 ， 那 些 质量 低劣 的 脚本 就 
会 导致 用 户 无 法 浏览 相应 的 网 页 甚至 整个 网 站 。 因 为 这 类 问题 频繁 
发 生 ， 没 过 多 久 , “JavaScript" 了 驶 在 许多 人 的 脑海 里 成 为 了 “网 页 无 
法 访问 ”的 同义词 。 

事实 上 ，JavaScript 与 “网 页 无 法 访问 ”无 任何 必然 的 联系 ， 网 页 能 否 


访问 完全 取决 于 如 何 应 用 JavaScript。 一 首 老 歌 中 这 样 写 道 ， 不 在 于 
你 做 什么 ， 只 在 于 你 怎么 做 。 











5.1.2 ”Flash 的 遭遇 


客观 地 讲 ， 没 有 不 好 的 技术 ， 只 有 没有 用 好 的 技术 。JavaScript 的 坎 
ab 的 技术 : Adobe 公 司 研 发 
^J]Flash. 


现在 ， 有 不 少 人 一 提起 Flash 就 会 想到 烦人 的 前 导 页 面 、 超 长 的 下 载 
时 间 和 随时 都 有 可 能 出 问题 的 浏览 体验 。 这 些 亚 劣 印象 其 实 与 Flash 
坚 不 相干 ， 它 们 都 是 由 那些 质量 低劣 的 实现 脚本 造成 的 。 


把 Flash 与 超 长 的 下 载 时 间 联 系 在 一 起 很 不 公平 ， 因 为 制作 短小 精 悍 
的 天 量 图 形 和 视频 片段 本 是 Flash 技 术 的 强项 之 一 。 利 用 Flash 技 术 
制作 一 些 视频 片段 来 介绍 上 自己 的 网 站 是 一 个 很 好 的 创意 ,但 当 这 种 
做 法 成 为 一 种 潮流 时 ， 这 类 视频 片段 的 数量 越 来 越 多 、 体 积 也 越 来 
越 大 ， 网 页 的 下 载 时 间 也 不 可 避免 地 变 得 越 来 越 长 。 此 时 ，Flash 要 
想 洗刷 掉 自 己 号 上 的 恶名 谈何容易 。 











类 似 地 ，JavaScript 本 是 一 种 能 让 网 页 变 得 易于 访问 的 技术 ， 然 而 它 
却 也 有 着 降低 网 站 可 用 性 和 可 访问 性 的 坏 名 声 。 


正如 物理 学 中 的 运动 与 惯性 定律 所 描述 的 那样 ， 如 果 人 们 在 开始 使 
用 一 种 新 撤 术 时 没有 经 过 深思 熬 感 ， 而 这 种 新 技术 又 很 快 地 成 为 了 
一 种 潮流 ， 则 纠正 在 早期 阶段 养 成 的 坏 习 惯 将 会 非常 困难 。 


我 敢 说 ， 之 所 以 会 有 那么 多 的 网 站 迫不及待 地 在 网 页 上 租 入 一 些 毫 
无 必要 的 Flash 视 频 片 段 ， 是 因为 “大 家 都 有 ， 所 以 我 也 要 有 ”的 心理 
而 不 是 因为 实际 应 用 的 需要 。 既 然 别 人 的 网 页 上 有 Flash 动 画 ， 那 么 
我 的 网 页 上 也 要 有 Flash 动 画 ， 有 无 必要 的 问题 已 无 人 问津 了 。 


JavaScript 也 遭遇 到 了 类 似 的 命运 : 人 们 只 关心 上 自己 的 网 页 里 有 没有 
JavaScript 代 码 ， 根 本 不 去 考虑 那些 现成 的 〈 尤 其 是 那些 由 “所 见 即 
所 得 ”网 页 设计 工具 生成 的 ) JavaScript 函 数 本 身 有 没有 漏洞 ， 以 及 
它们 会 不 会 给 网 页 带 来 负面 影响 。JavaScript 代 码 被 人 们 剪贴 来 、 剪 
贴 去 ， 结 果 弄 得 网 上 到 处 都 是 似是而非 的 JavaScript 网 页 ， 却 没 人 想 
到 应 该 首先 检查 一 下 那些 现成 的 JavaScript 函 数 是 否 还 需要 改进 。 


5.1.3 ”质疑 一 切 


不 管 你 想 通过 JavaScript 改 变 哪个 网 页 的 行为 ， 都 必须 三 思 而 后 行 。 
首先 要 确认 : 为 这 个 网 页 增加 这 种 额外 的 行为 是 否 确 有 必要 ? 


网 站 对 JavaScript 的 滥用 已 经 持续 了 相当 长 的 时 间 ， 因 为 滥用 
JavaScript 而 给 自己 带 来 种 种 奈 烦 的 网 站 也 绝 不 是 少数 。 例 如 ， 你 可 
以 用 JavaScript 脚 本 让 浏览 器 窗口 在 屏 间 上 四 处 移动 ， 甚 至 让 浏览 器 
窗口 产生 振动 效果 。 


在 所 有 的 JavaScript 特 效 当 中 ， 最 贞 名 昭著 的 莫 过 于 那些 在 人 们 打开 

网 页 时 弹出 的 广告 窗口 。 对 JavaScript 和 DOM 脚 本 编写 者 来 说 不 坟 

的 是 ， 有 不 少 用 户 为 此 干脆 彻底 禁 FA J JavaScript. Dias) AEE 

各 自 的 产品 里 提供 了 种 种 内 建 的 广告 过 滤 机 制 来 解决 这 一 问题 ， 但 
“ 告 还 是 无 孔 不 入 。 


弹出 的 广告 窗口 和 内 容 覆 盖 是 一 个 典型 的 小 用 JavaScript 的 例子 。 从 
技术 上 讲 ， 弹 出 窗口 本 身 是 一 项 很 实用 的 功能 ， 它 解决 了 网 页 设计 
工作 中 的 一 个 难题 : 如 何 向 用 户 发 送信 息 。 但 在 实践 中 ， 频 繁 弹出 
































的 广告 窗口 却 让 用 户 不 胜 其 烦 。 那 些 弹 出 窗口 必须 由 用 户 关 财 ， 而 
这 往往 会 形成 一 种 拉锯 战 一 一 用 户 刚 关闭 了 一 个 三 告 窗 口 ， 屏 关上 
区 


那么 ， 这 一 功能 要 如 何 使 用 户 受 益 呢 ? 


令 人 感到 欣慰 的 是 ， 这 一 问题 正 越 来 越 受 到 人 们 的 关注 ， 那 些 不 遵 
(RAPS EE f pedo MAIS XUE. AEA URE. 


MARIEH JavaScript, LBL: 这 么 做 会 对 用 户 的 浏览 体验 产生 
怎样 的 影响 ”还 有 个 更 重要 的 问题 : 如 果 用 户 的 浏览 器 不 文 持 
JavaScript 该 怎么 办 ? 








5.2 平稳 退化 


记 住 ， 网 站 的 访问 者 完全 有 可 能 使 用 的 是 不 支持 JavaScript 的 浏览 
器 ， 还 有 一 种 可 能 是 虽然 浏览 器 文 持 JavaScript， 但 用 户 已 经 禁用 它 
了 《比如 ， 因 为 讨厌 看 到 弹出 广告 ) 。 如 果 没 有 考虑 到 这 种 情况 ， 
人 们 在 访问 你 们 的 网 站 时 就 有 可 能 过 到 各 种 各 样 的 县 烦 ， 并 因此 不 
再 来 访问 你 们 的 网 站 。 


如 果 正 确 地 使 用 了 JavaScript 脚 本 ， 就 可 以 让 访问 者 在 他 们 的 浏览 器 
不 文 持 JavaScript 的 情况 下 仍 能 顺利 地 浏览 你 的 网 站 。 这 就 是 所 谓 的 
平稳 退化 (graceful degradation) ， 束 是 说 ， 虽 然 某 些 功能 无 法 使 
用 ， 但 最 基本 的 操作 仍 能 顺利 完成 。 


我 们 来 看 一 个 在 新 窗口 里 打开 一 个 链接 的 例子 。 列 担心 : 我 们 将 要 
讨论 的 并 不 是 在 网 页 加 载 时 弹出 新 窗口 。 而 是 在 用 户 点 击 茶 个 链接 
时 弹出 一 个 新 窗口 。 这 其 实 是 一 项 相当 实用 的 功能 。 例 如 ， 在 许多 
电子 商务 网 站 的 结算 页 面 上 都 有 一 些 指 癌 服务 条 天 或 是 邮寄 费用 表 
的 链接 ， 与 其 让 用 户 在 点 击 这 些 链接 时 被 市 离 当前 页 面 ， 不 如 让 用 
户 仍 停留 在 当前 页 面 ， 并 用 一 个 弹出 窗口 来 显示 相关 信息 。 

注意 ”应 该 只 在 绝对 必要 的 情况 下 才 使 用 弹出 窗口 ， 因 为 这 
将 牵涉 到 网 页 的 可 访问 性 问题 ， 例 如 ， 用 户 使 用 的 屏幕 读 取 软 
件 无 法 向 用 户 说 明 弹 出 了 窗口 。 因 此 ， 如 果 网 页 上 的 某 个 链接 
将 弹出 新 窗口 ， 最 好 在 这 个 链接 本 里 的 文字 中 了 予以 说 明 。 


JavaScript 使 用 window 对 象 的 open() 方法 来 创建 新 的 浏览 器 窗 
口 。 这 个 方法 有 三 个 参数 : 


window.open(url,name,features) 


这 三 个 参数 都 是 可 选 的 。 


。 第 一 个 参数 是 想 在 新 窗口 里 打开 的 网 页 的 URL 地 址 。 如 果 省 略 
这 个 参数 ， 屏 幕 上 将 弹出 一 个 空白 的 浏览 右 窗 口 。 






































第 二 个 参数 是 新 窗口 的 名 字 。 可 以 在 代码 里 通过 这 个 名 字 与 新 
窗口 进行 通信 。 

最 后 一 个 参数 是 一 个 以 逗号 分 隔 的 字符 串 ， 其 内 容 是 新 窗口 的 
各 种 属性 。 这 些 属性 包括 新 窗口 的 尺寸 《宽度 和 高 度 ) 以 及 新 
窗口 被 月 用 或 蒜 用 的 各 种 浏览 功能 〈 工 具 条 、 沫 单条 、 初 始 显 
示 位 置 ， 等 等 ) 。 对 于 这 个 参数 应 该 掌握 以 下 原则 : 新 窗口 的 
浏览 功能 要 少 而 精 。 

open() 方法 是 使 用 BOM 的 一 个 好 案例 ， 它 的 功能 对 文档 的 内 容 也 
无 任何 影响 〈( 那 是 DOM 的 地 盘 )〉 。 这 个 方法 只 与 浏览 环境 (具体 
到 这 个 例子 ， 就 是 window WR) AX. 


下 面 这 个 函数 是 window.open( ) 方法 的 一 种 典型 应 用 : 




















function popUp(winURL) ( 
window.open(winURL, "popup", "width=320, height=480" ) ; 








这 个 函数 将 打开 一 个 320 像 素 宽 、480 像 素 高 的 新 窗口 "popup”。 
为 我 在 这 个 函数 里 已 为 新 窗口 命名 ， 所 以 当 把 新 的 URL 地 址 传递 给 
此 函数 时 ， 这 个 函数 将 把 新 窗口 里 的 现 有 文档 蔡 换 为 新 UREL 地 址 处 
的 文档 ， 而 不 是 再 去 创建 一 个 新 窗口 。 


我 将 把 这 个 函数 存 入 一 个 外 部 文件 。 因 此 ， 当 需要 在 某 个 网 页 里 使 
用 此 函数 时 ， 只 要 在 这 个 网 页 的 <head> 部 分 用 一 个 <script> 标签 
导入 那个 外 部 文件 即 可 。 函 数 本 吴 不 会 对 网 页 的 可 访问 性 产生 任何 
影响 ， 会 影响 到 网 页 的 只 是 : 我 将 如 何 使 用 此 函数 。 


调用 popUp 函数 的 一 个 办 法 是 使 用 伪 协 议 〈pseudo-protocol) 。 





5.2.1 “javascript:” 伪 协议 


“ 真 ”协议 用 来 在 因特网 上 的 计算 机 之 间 传 输 数 据 包 ， 如 HTTP 协 议 
Chttp:/) 、EFTP 协 议 〈ftp:/) 等 ， 伪 协议 则 是 一 种 非 标准 化 的 协 
议 。“javascript:” 伪 协议 让 我 们 通过 一 个 链接 来 调用 JavaScript 函 
数 。 


下 面 是 通过 “javascript:” 伪 协议 调用 popUp() 函数 的 具体 做 法 : 


<a hrefz"javascript:popUp( 'http://www.example.com/');"»Example«/a» 
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JavaScript 功 能 的 浏览 器 会 什么 也 不 做 。 


， 在 HIML 文 档 里 通过 “javascript:” 伪 协议 调用 JavaScript 代 码 的 
做 法 下 i DEF o 


5.2.2. Ay ERHI FAF AE p BV 


我 们 已 经 在 第 4 章 的 图 片 库 脚 本 见识 过 事件 处 理 函 数 的 用 途 和 用 法 
J: 把 onclick 事件 处 理 函 数 作 为 属性 舱 入 <a> 标签 ， 该 处 理 函 数 
将 在 onclick 事件 发 和 后 时 调用 图 片 切换 函数 。 


这 个 技巧 同样 可 以 用 来 调用 popUp 函数 。 但 当 在 某 个 链接 里 
用 onclick 事件 处 理 函 数 去 打开 新 窗口 时 ， 过 个 链接 的 href 属性 
似乎 没有 什么 用 处 一 一 与 这 个 链接 有 关 的 重要 信息 已 经 都 包括 在 它 
ek 属性 里 了 。 这 也 正 是 我 们 经 党 会 看 到 如 下 所 示 的 链接 的 
原因 | : 





«a href="#" onclick="popUp('http://www.example.com/'); 
æ return false;">Example</a> 





因为 在 上 面 这 条 HTML 指 令 里 使 用 了 return false 语句 ， 这 个 链 
接 不 会 真 的 被 打开 。 “护符 号 是 一 个 仅 供 文档 内 部 使 用 的 链接 记号 
( 单 束 这 条 指令 而 言 ，“#” 是 未 指 同 任何 目标 的 内 部 链接 ) 。 在 某 
些 浏览 占 里 ，“#” 链 接 指 问 当前 文档 的 开头 。 把 href 属性 的 值 设 置 
为 “#? 只 是 为 了 创建 一 个 空 链 接 。 实 际 工 作 全 部 由 onclick 属性 负 


TETEK o 








很 遗憾 ， 这 个 技巧 与 用 “javascript:” 伪 协议 调用 JavaScript 代 码 的 做 
法 同样 粳 糙 ， 因 为 它们 都 不 能 平稳 退化 。 如 果 用 户 已 经 禁用 了 浏览 
器 的 JavaScript 功 能 ， 这 样 的 链接 将 室 无 用 处 。 


5.2.3” 谁 关心 这 个 


或 许 你 对 我 反复 强调 “平稳 退化 "有 些 不 解 ， 让 那些 不 支持 或 禁用 了 
Javascript 功 能 的 浏览 器 也 能 顺利 地 访问 你 的 网 站 真 的 那么 重要 吗 ? 


请 想象 一 下 ， 有 个 访问 者 来 到 了 你 的 网 站 ， 他 总 是 在 浏览 Web 时 辣 
时 禁用 图 像 和 JavaScript。 你 肯定 认为 如 今 这 样 的 用 户 已 非常 少见 ， 
而 事实 也 正 是 如 此 。 但 这 个 访问 者 非常 重要 。 


你 想象 的 那个 用 户 是 一 个 搜索 机 器 人 Csearchbot) 。 搜 索 机 器 人 是 
一 种 自动 化 的 程序 ， 它 们 浏览 Web 的 目的 是 为 了 把 各 种 网 页 添加 到 
搜索 引擎 的 数据 库 里 。 各 大 搜索 引擎 都 有 类 似 的 程序 。 目 前 ， 只 有 
极 少数 搜索 机 器 人 能 够 理解 JavaScript 代 码 。 所 以 ， 如 果 你 的 

JavaScript 网 页 不 能 平稳 退化 ， 它 们 在 搜索 引擎 上 的 排名 就 可 能 大 受 


损害 。 
具体 到 popUp() 函数 ， 为 其 中 的 JavaScript 代 码 预 留 出 退路 很 人 


单 : 在 链接 里 把 href 属性 设置 为 真实 存在 的 URL 地 址 ， 让 它 成 为 
一 个 有 效 的 链接 ， 如 下 所 示 : 

















<a href="http://www.example.com/" 
æ onclick="popUp('http://www.example.com'; return false;">Example</a> 





因为 URL 地 址 出 现 了 两 次 ， 上 面 这 些 代 码 显 得 有 点 见长 ， 但 我 们 可 
以 利用 JavaScript 语 言 把 它 改写 得 简明 一 些 。this 可 以 用 来 代表 任 
何 一 种 当前 元 素 ， 所 以 可 以 用 this 和 getAttribute() 方法 提取 
出 href 属性 的 值 ， 如 下 所 示 : 














<a href="http://www.example.com/" 
æ onclick-"popUp(this.getAttribute('href'); return false;">Example</a 


PO 


老实 说 ， 上 面 这 条 语句 没有 精简 多 少 。 当 前 链接 的 href 属性 还 有 
一 个 更 简明 的 引用 办 法 一 一 使 用 由 DOM 提 供 的 this.href 属性 : 


«a href="http://www.example.com/" 
æ onclick="popUp(this.href); return false;">Example</a> 








不 管 采 用 哪 种 方法 ， 重 要 的 是 href 属性 现在 已 经 有 了 合法 的 值 。 
与 href = "javascript:..." 或 href = "#" 相 比 ， 这 几 种 变 体 
的 效果 要 好 得 多 。 


所 以 ， 在 把 href 属性 设置 为 真实 存在 的 URL 地 址 后 ， 即 使 
JavaScript 已 被 禁用 (或 遇 到 了 搜索 机 〉 ， 这 个 链接 也 是 可 用 的 。 虽 
然 这 个 链接 在 功能 上 打 了 点 儿 折 扣 《 因 为 它 没 有 打开 一 个 新 窗 

O) ， 但 它 并 没有 彻底 失效 。 这 是 一 个 经 典 的 “平稳 退化 ”的 例子 。 


在 本 书 此 前 介绍 的 所 有 技巧 当中 ， 这 个 技巧 是 最 有 用 的 ， 但 它 还 有 
改进 的 余地 。 这 个 技巧 最 明显 的 不 足 是 : 每 当 需 要 打开 新 窗口 时 ， 
就 不 得 不 把 一 些 JavaScript 代 人 码 蔡 入 标记 文档 中 。 如 果 能 把 包括 事件 
s nt 内 的 所 有 JavaScript 代 码 全 都 放 在 外 部 文件 里 ， 这 个 技巧 
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5.3. [HCSS^£ >] 


此 前 ， 我 兽 以 JavaScript 和 Flash 为 例 ， 对 技术 会 因为 在 诞生 初期 被 
人 们 滥用 而 造成 恶劣 后 果 的 问题 进行 了 讨论 。 我 们 可 以 从 过 去 的 失 
误 里 学 到 很 多 东西 。 


不 过 ， 还 有 一 些 技 术 是 从 一 开始 殊 被 人 们 小 心 谨 惯 地 使 用 着 的 。 我 
们 可 以 从 它们 那里 学 到 更 多 的 东西 。 


5.3.1 结构 与 样式 的 分 离 


CSS【〔 层 又 样式 表 ) 是 一 项 了 不 起 的 技术 。CSS 可 以 让 人 们 对 网 站 
设计 工作 中 的 各 个 方面 做 出 严格 细致 的 控制 。 表 面 上 看 ，CSS 技 术 
并 无 新 内 容 ，CSS 能 做 到 的 用 <table> 和 <font> 等 标签 也 可 以 做 
到 。CSS 技 术 的 最 大 优点 是 ， 它 能 够 帮助 你 将 Web 文 档 的 内 容 结构 
《标记 ) 和 版 面 设 计 《〈 样 式 ) 分 离开 来 。 


我 们 经 常会 过 到 一 些 儿 乎 每 个 元 系 部 带 有 style 属性 的 Web 文 档 ， 
而 这 是 CSS 技 术 最 缺乏 效率 的 用 法 之 一 。 真 正 能 从 CSS 技 术 获 益 的 
方法 ， 是 把 样式 全 部 转移 到 外 部 文件 中 去 。 


与 JavaScript 和 Flash 相 比 ，CSS 的 “出 生 ” 日 期 要 晚 得 多 。 或 许 是 已 经 
从 滥用 JavaScript 和 Flash 的 后 果 中 吸取 了 教训 的 缘故 ， 网 页 设计 人 
员 一 开始 使 用 CSS 时 束 采 用 了 一 种 深思 敦 虑 、 渐 进 增强 的 态度 。 


把 文档 的 结构 和 样式 分 为 两 部 分 的 CSS 技 术 给 每 个 人 部 带 来 了 方 
便 。 如 果 你 的 工作 是 编写 文档 的 内 容 ， 现 在 只 要 集中 精力 把 文档 的 
内 容 正 确 地 标记 出 来 环行 了 ， 用 不 厦 再 与 充斥 着 <table> 和 
«font» 等 标签 的 模板 打交道 ， 也 就 用 不 着 再 担心 会 把 文档 的 版 面 
设计 乔 得 一 团 粮 。 如 果 你 的 工作 是 设计 网 页 的 版 面 ， 现 在 只 要 集中 
精力 把 诸如 颜色 、 字 体 和 位 置 等 在 一 些 外 部 文件 里 设置 妥当 就 行 
了 ， 而 无 需 再 接触 文 要 ， 最 多 只 需要 添加 些 类 或 是 id 属性 。 


作为 CSS 技 术 的 突出 优点 ， 文 档 结 构 与 文档 样式 的 分 离 可 以 确保 网 
页 都 能 平稳 退化 。 有 具备 CSS 文 持 的 浏览 器 固然 可 以 把 网 页 呈现 得 类 
仑 美 疾 ， 不 文 持 或 禁用 了 CSS 功 能 的 浏览 右 同 样 可 以 把 网 页 的 内 容 

















按照 正确 的 结构 显示 出 来 。 
按 这 种 原则 使 用 JavaScript 时 ， 我 们 可 以 从 CSS 映 上 借鉴 到 很 多 东 
西 。 


5.3.2 ”渐进 增强 


在 网 页 设计 人 员 当 中 流传 看 这 样 一 句 格 言 :“ 内 容 束 是 一 切 ”。 如 果 
没有 内 容 ， 创 建 网 站 还 有 何 用 ? 


话 虽 如 此 ， 也 不 能 简单 地 把 原始 内 容 发 布 到 网 上 ， 而 不 加 任何 描 

述 。 内 容 需 要 用 HTML 或 XHTML 之 类 的 标记 语言 来 描述 。 在 创建 
网 站 的 时 候 ， 给 内 容 加 上 正确 的 HIML 标 记 是 第 一 个 步骤 ， 或 许 也 
fe ee 我 们 可 以 修正 那 句 格言 为 “标记 恨 好 的 内 容 束 是 
=y]; 


只 有 正确 地 使 用 标记 语言 才能 对 内 容 做 出 准确 的 描述 。 各 种 标记 负 
责 提供 诸如 “这 是 列表 项 “这 是 文本 段落 ?之 类 的 信息 。 如 果 不 使 
Hi«li». <p> 之 类 的 标签 ， 我 们 就 很 难 把 它们 区 分 开 来 。 


在 给 内 容 加 上 各 种 标记 后 ， 就 可 以 使 用 各 种 CSS 指 令 控 制 内 容 的 显 
示 效 果 。CSS 指 令 构成 了 一 个 表示 层 。 这 个 表示 层 就 像 是 一 张 透明 
的 彩色 薄膜 ， 可 以 包 庄 到 文档 的 结构 上 ， 使 文档 的 内 容 呈 现 出 各 种 
色彩 。 但 即使 去 掉 这 个 表示 层 ， 文 档 的 内 容 也 依然 可 以 访问 (只 是 
缺乏 色彩 而 已 ) 。 


所 谓 “ 渐 进 增强 ?就 是 用 一 些 额外 的 信息 层 去 包 训 原 始 数据 。 按 
照 “ 渐 进 增强 ?原则 创建 出 来 的 网 页 几乎 “如 果 不 是 “全 部 的话) 都 
符合 “平稳 退化 ?原则 。 


类 似 于 CSS，JavaScript 和 DOM 提 供 的 所 有 功能 也 应 该 构成 一 个 额 
外 的 指令 层 。CSS 代 码 负责 提供 关于 “表示 ”的 信息 ，JavaScript 代 人 码 
负责 提供 关于 “行为 ”的 信息 。 行 为 层 的 应 用 方式 与 表示 层 一 样 。 


要 想 获得 最 佳 的 表示 ?效果 ， 就 应 该 把 CSS 代 码 从 HTML 文档 里 分 
离 出 来 放 在 一 些 外 部 文件 里 。 像 下 面 这 样 把 CSS 代 码 混杂 在 HTML 
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<p style="font-weight: bold; color: red;"> 
Be careful! 
</p> 





更 值得 推荐 的 办 法 是 ， 先 把 样式 信息 存 入 一 个 外 部 文件 ， 再 在 文档 
的 head 部 分 用 <1link> 标签 来 调用 这 个 文件 : 


.Warning { 
font-weight: bold; 
color: red; 


} 








class 属性 是 样式 与 文档 内 容 之 间 的 联结 纽带 : 


<p class="warning"> 
Be careful! 
</p> 








这 显然 更 容易 阅读 和 理解 ， 而 且 样式 信息 也 更 容易 修改 了 。 例 如 ， 

假设 你 在 100 个 文档 里 使 用 了 warning 类 来 排版 各 种 警告 信息 ， 而 
现在 想 统一 改变 那些 警告 信息 的 显示 效果 ， 比 如 把 它们 的 颜色 都 从 
红色 改 为 蓝 色 。 那 么 ， 如 果 你 已 经 把 它们 的 表示 层 和 结构 分 开 了 ， 

就 可 以 很 容易 地 修改 样式 了 。 








.Warning { 
font-weight: bold; 
color: blue; 


} 








如 朵 把 这 个 样式 混杂 在 那 100 个 文档 里 ， 则 不 得 不 进行 大 量 的 “搜索 
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显然 ， 把 CSS 代 码 从 HTML 文档 里 分 离 出 来 可 以 让 CSS 工 作 得 最 
好 。 这 个 适用 于 CSS 表 示 层 的 结论 同样 适用 于 JavaScript 行 为 层 。 





5.4 ^r JavaScript 


你 此 前 见 到 的 JavaScript 代 码 都 已 经 与 HTML 文 档 分 得 很 开 了 。 负 责 
实际 完成 各 项 任务 的 JavaScript 函 KB DUE APR 问题 出 现在 
内 磐 的 事件 处 理 函 数 中 。 


类 似 于 使 用 style 属性 ， 在 HTML 文 档 里 使 用 诸如 onclick 之 类 的 
属性 也 是 一 种 既 没 有 效率 又 容易 引发 问题 的 做 法 。 如 果 我 们 用 一 
个 “挂钩 ”， 就 像 CSS 机 制 中 的 class 或 id 属性 那样 ， 把 JavaScript 代 
码 调用 行为 Ss 吉 构 和 内 容 分 离开 ， 网 页 就 会 健壮 得 
多 。 那 么 ， 可 和 否 用 下 面 这 条 语句 来 表明 “ 当 这 个 链接 被 点 击 时 ， 它 
将 酒 用 popup () à 函数 ”的 意思 呢 ? 

















«a href="http://www.example.com/" class="popup">Example</a> 





我 很 高 兴 告 诉 大 家 : 完全 可 以 这 样 做 。JavaScript 语 言 不 要 求 事 件 必 
须 在 HTML 文 档 里 处 理 ， 我 们 可 以 在 外 部 JavaScript 文 件 里 把 一 个 事 
件 添加 到 HTML 文 档 中 的 某 个 元 素 上 : 


element.event = action... 


关键 是 怎样 才能 把 应 该 获得 这 个 事件 的 元 素 确 定 下 来 。 这 个 问题 可 
以 利用 class 或 id 属性 来 解决 。 


如 末 想 把 一 个 事件 添加 到 某 个 珊 有 特定 id 属性 的 元 素 上 ， 
用 getElementById 就 可 以 解决 问题 : 


getElementById(id).event = action 





如 果 事 情 涉 及 多 个 元 素 ， 我 们 可 以 用 getElementsByTagName 和 
getAttribute 把 事件 添加 到 有 着 特定 属性 的 一 组 元 素 上 。 


具体 步骤 如 下 所 示 。 
(1) 把 文档 里 的 所 有 链接 全 放 入 一 个 数组 里 。 
(2) 遇 历 数组 。 


(3) 如 果 某 个 链接 的 Class ， 了 驶 表示 这 个 链接 在 被 
点 击 时 应 该 调用 popUp() 函数 。 于 是 ， 


A. 把 这 个 链接 的 href 属性 值 传递 给 popUp() 函数 ; 
E ad 文 个 链接 的 默认 行为 ， 不 让 这 个 链接 把 访问 者 带 离 当前 窗 


下 面 是 实现 上 述 步骤 的 JavaScript 代 码 : 


var links = document.getElementsByTagName("a") ; 
for (var i=@; i«links.length; i++) { 
if (links[i].getAttribute("class") == "popup") { 
links[i].onclick = function() { 
popUp(this.getAttribute("href")); 
return false; 





en popUp() 函数 的 onclick 事件 添加 到 有 关 的 链接 
只 要 把 它们 存 入 一 个 外 部 JavaScript 文 什 ， 就 等 于 是 把 这 些 操作 
Wong ee EHE. Meo) BJavaScript’ HJ X. 


还 有 个 问题 需要 解决 : 如 末 把 这 段 代 但 存 入 外 部 JavaScript 文 件 ， E 
们 将 无 法 正常 运行 。 因 为 这 段 代码 的 第 一 行 是 : 


var links = document.getElementsByTagName("a") ; 
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这 条 语句 将 在 JavaScript 文 件 被 加 载 时 立刻 执行 。 如 果 JavaScript 文 
件 是 从 HTML 文 档 的 chead> 部 分 用 <script> 标签 调用 的 ， 它 将 在 
HTML 文 档 之 前 加 载 到 浏览 器 里 。 同 样 ， 如 果 <script> 标签 位 于 
SO JE 部 </body> 之 前 ， 就 不 能 保证 哪个 文件 最 先 结束 加 载 (浏览 
器 可 能 一 次 加 载 多 个 ) 。 因 为 脚本 加 载 时 文档 可 能 不 完整 ， 所 以 模 
型 也 不 完 整 。 没 有 完整 的 DOM，getElementsByTagName 等 方法 
BLAS A EX IE. 
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。 还 好 ，HITML 文 档 全 部 加 载 完 毕 时 将 触发 一 个 事件 ， 这 个 事件 
su 目 己 的 事件 处 理 函 数 。 


文档 将 被 加 载 到 一 个 浏览 器 窗口 里 ，document 对 象 又 是 window 对 
象 的 一 个 属性 。 dw 对 象 触发 onload 事件 时 ，document 对 
象 已 经 存在 。 


我 将 把 我 的 JavaScript 代 人 码 打包 在 prepareLinks 函数 里 ， 并 把 这 个 
函数 添加 到 window 对 象 的 onload 事件 上 去 。 这 样 一 来 ，DOM 就 
Ay WER LET: 


window.onload = prepareLinks; 
function prepareLinks() ( 
var links - document.getElementsByTagName("a"); 
for (var i20; i«links.length; i++) { 
if (links[i].getAttribute("class") == "popup") { 
links[i].onclick = function() ( 
popUp(this.getAttribute("href")); 


return false; 





别 忘 记 把 popUp 函数 也 保存 到 那个 外 部 JavaScript 文 件 里 去 : 


function popUp(winURL) ( 
window.open(winURL, "popup", "width-320,height-480"); 
} 





这 是 一 个 非 第 简单 的 例子 ， 但 它 演 示 了 怎样 才能 成 功 地 把 行为 与 结 
构 分 离开 来 。 在 第 6 瘟 ， 我 还 会 介绍 几 种 可 以 在 文档 加 载 时 把 事件 
添加 到 元 素 上 去 的 巧妙 办 法 。 








5.5 RHA 


正如 前 面 反 复 强 调 的 那样 ， 你 的 网 站 的 访问 者 很 可 能 未 启用 
JavaScript 功 能 。 此 外 ， 不 同 的 浏览 器 对 JavaScript 的 支持 程度 也 不 
一 样 。 绝 大 多 数 浏览 器 都 能 或 多 或 少 地 支持 JavaScript， 而 绝 大 多 数 
现代 的 浏览 器 对 DOM 的 支持 都 非常 不 错 。 但 比较 古老 的 浏览 器 却 
很 可 能 无 法 理解 DOM 提 供 的 方法 和 属性 。 因 此 ， 即 使 某 位 用 户 在 
访问 你 的 网 站 时 使 用 的 是 支持 JavaScript 的 浏览 器 ， 某 些 脚本 也 不 一 
XE Be IE? LE. 
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持 程 度 。 这 有 点 儿 像 游乐 园 里 的 警告 牌 : “你 必须 达到 这 一 身高 才 

能 参与 这 项 游乐 活动 ”。 换 句 话 说 ， 需 要 在 DOM 脚 本 里 表达 出 下 面 
这 个 含义 : “你 必须 理解 这 么 多 的 JavaScript 语 言 才 能 执行 这 些 语 


Aj”, 





这 个 解决 方案 很 容易 实现 ， 只 要 把 某 个 方法 打包 在 一 个 if 语句 
里 ， 就 可 以 根据 这 条 if 语句 的 条 件 表达 式 的 求 值 结果 是 true (这 
个 方法 存在 ) 还 是 false 〈 这 个 方法 不 存在 ) 来 决定 应 该 采取 怎样 
的 行动 。 这 种 检测 称 为 对 象 检 测 (object detection) 。 第 2 章 介 绍 
过 ， 几 乎 所 有 的 东西 〈 包 括 各 种 方法 在 内 ) 都 可 以 被 当做 对 象 来 对 
待 ， 而 这 意味 着 我 们 可 以 容易 地 把 不 支持 某 个 特定 DOM 方 法 的 浏 
览 器 检测 出 来 : 











if (method) ( 
statements 


} 





例如 ， 如 果 有 一 个 使 用 了 getElementById() 方法 的 函数 ， 就 可 以 
在 调用 getElementById() 方法 之 前 先 检查 用 户 所 使 用 的 浏览 器 是 
侍 支 持 这 个 方法 。 在 使 用 对 象 检 测 时 ， 一 定 要 删 掉 方 法 名 后 面 的 圆 
括 写 ， 如 果 不 删 挥 ， 测 试 的 将 是 方法 的 结果 ， 无 论 方法 是 否 存在 。 








function myFunction() { 
if (document.getElementById) { 
statements using getElementById 


} 


} 





因此 ， 如 果 某 个 浏览 器 不 支持 getElementById() 方法 ， 它 就 永远 
也 不 会 执行 使 用 此 方法 的 语句 。 


这 个 解决 方案 的 唯一 不 足 是 ， 如 此 编写 出 来 的 函数 会 增加 一 对 花 括 
号 。 如 果 需 要 在 函数 里 检测 多 个 DOM 方 法 和 /或 属性 是 否 存在 ， 这 
个 函数 中 最 重要 的 语句 就 会 被 深 埋 在 一 层 又 一 层 的 花 括 号 里 。 而 这 
样 的 代码 往往 很 难 阅读 和 理解 。 

把 测试 条 件 改 为 “如果 你 不 理解 这 个 方法 ， 请 离开 ” 则 更 简单 。 

为 了 把 测试 条 件 从 “如 果 你 理解 .……. 2” 改 为 “如 果 你 不 理解 .……. UE 


要 使 用 “逻辑 非 ? 操 作 符 ， 这 个 操作 符 在 JavaScript 语 言 里 表示 为 一 个 
惊叹 号 : 








if (!method) 


测试 条 件 中 的 “...... 请 离开 ”可 以 用 一 条 return 语句 来 实现 。 因 为 
这 相当 于 中 途 退 出 函数 ， 所 以 让 它 返 回 布尔 值 false 比较 贴切 。 用 
来 测试 getElementById 是 否 存在 的 语句 如 下 所 示 : 


if (!document.getElementById) { 
return false; 


} 





PE re 


因为 花 括 号 部 分 只 有 return false 一 条 语句 ， 我 们 可 以 把 它 简写 
MAT: 


if (!document.getElementById) return false; 








如 来 需要 测试 多 个 方法 或 属性 是 否 存 在 ， 可 以 用 “你 辑 或 ”操作 符 将 
其 合并 ， 这 个 操作 符 在 JavaScript 语 言 里 表示 为 两 个 竖 线 符号 。 如 下 
所 示 : 





if (!document.getElementById || !document.getElementsByTagName) return 








如 采 这 是 游乐 园 里 的 一 块 警 告 牌 的 话 ， 它 的 意思 是 “如 采 你 不 理解 
getElementById 和 getElementsByTagName ， 你 就 不 能 参与 这 项 
游乐 活动 ”。 


现在 ， 我 将 按照 这 一 思路 ， 在 用 来 把 onclick 事件 添加 到 链接 上 去 
的 网 页 加 载 脚 本 里 插入 一 条 if 语句 。 那 个 脚本 里 使 用 了 
getElementsByTagName ， 所 以 需要 插入 一 条 if 语句 去 检查 浏览 
器 是 人 否 理解 这 个 方法 : 


window.onload = function() { 
if (!document.getElementsByTagName) return false; 
var Inks = document.getElementsByTagName("a") ; 
for (var i=@; i«lnks.length; i++) { 
if (1nks[i].getAttribute("class") == "popup") { 
Inks[i].onclick = function() { 
popUp(this.getAttribute("href")); 


return false; 








虽然 只 是 一 条 简单 的 if imu), (AE nI UL BS RAB E A E i 
不 会 因为 我 的 脚本 代码 而 出 问题 。 这 么 做 是 为 了 让 脚本 有 良好 的 向 


后 兼容 性 。 因 为 我 在 给 网 页 添加 各 有 关 行为 时 始终 遵循 了 “渐进 增 
强 * 的 原则 ， 所 以 可 以 确切 地 知道 我 添加 的 那些 都 能 平稳 退化 ， 我 
的 网 页 在 那些 “古老 的 ”浏览 器 里 也 能 正常 浏览 。 那 些 只 支持 一 部 分 
JavaScript 功 能 但 不 支持 DOM 的 浏览 器 仍 可 以 访问 我 的 网 页 的 内 
容 。 





5.5.2 ”浏览 器 嗅 探 技术 


在 JavaScript 脚 本 代码 里 ， 在 使 用 某 个 特定 的 方法 或 属性 之 前 ， 先 测 
试 它 是 人 否 真实 存在 是 确保 问 后 兼容 性 最 安全 和 最 可 信 的 办 法 ， 但 它 
并 不 是 唯一 的 办 法 。 在 浏览 右 市 场 群 雄 逐 鹿 的 那个 年 代 ， 一 种 称 为 
浏览 器 嗅 探 (browser sniffing) 的 技术 曾经 非常 流行 。 


«3X Vi ds ELT E XB IRE pae EDUDU V is D WI Fe] pae Hc HE Fd As 2 E D I] Js CER 
问题 。 从 理论 上 讲 ， 可 以 通过 Javasaript 代 码 检索 关于 浏览 器 曲牌 和 
版 本 的 信息 ， 这 些 信息 可 以 用 来 改善 JavaScript 脚 本 代码 的 癌 后 兼容 
性 ， 但 这 是 一 种 风险 非常 大 的 技术 。 


首先 ， 浏 览 器 有 时 会 : AR CUL" o ELS ERA, AEN Maret Ao 
ee PA has, KOA ESD as AFH ES EB HES 

















A Z3 3&8 HT ERU TDA a ase) a LR ALAS = AE FOR 
EUER. MUR ALE i Tt a MR RAI AS HE ESP GE, a ALMA AT 
有 可 能 出 现 的 供应 商 和 版 本 号 组 合 。 这 是 一 个 无 穷尽 的 任务 ， 测 试 
的 组 合 情 况 越 多 ， 代 码 束 越 复 洒 和 元 长 。 


最 后 ， 许 多 浏览 器 嗅 探 脚 本 在 进行 这 类 测试 时 要 求 浏览 器 的 版 本 号 
必须 得 到 精确 的 匹配 。 因 此 ， 每 当 市 场 上 出 现 新 版 本 时 ， 就 不 得 不 
修改 这 些 脚本 。 


令 人 感到 欣慰 的 是 ， 充 满 着 风险 的 浏览 器 串 探 技术 正在 被 更 简 蛙 也 
更 健壮 的 对 象 检测 技术 所 取代 。 








5.6 ”性 能 考虑 


很 多 人 都 会 忽视 脚本 对 Web 应 用 整体 性 能 的 影响 。 为 保证 应 用 流畅 
地 运行 ， 在 为 文档 编写 和 应 用 脚本 时 ， 需 要 注意 一 些 问 题 。 


5.6.1 尽量 少 访问 DOM 和 尽量 减少 标记 


人 
9: 


if (document.getElementsByTagName("a").length > 0) { 
var links - document.getElementsByTagName("a"); 
for (var i=@; i«links.length; i++) { 


// 对 每 个 链接 做 点 处 理 





} 
} 





搞 清楚 这 段 代码 要 干什么 ， 上 自然 就 会 明日 问题 在 哪里 了 。 首 先 ， 它 
取得 了 所 有 <a> 元 素 ， 然 后 检查 它们 的 个 数 是 不 是 大 于 0: 


if (document.getElementsByTagName("a").length > 0) { 





然后 ， 如 末 大 于 0， 它 会 再 次 取得 所 有 <a> US Papi XE 
素 并 应 用 菏 些 操作 : 


var links = document.getElementsByTagName("a") ; 
for (var i20; i«links.length; i++) { 








虽然 这 段 代 码 可 以 运行 ， 但 它 不 能 保持 最 优 的 性 能 。 不 管 什 么 时 
候 ， 只 要 是 查询 DOM 中 的 某 些 元 素 ， 浏 览 右 都 会 搜索 整个 DOM 


树 ， 从 中 碍 找 可 能 匹配 的 元 素 。 这 段 代 码 居 然 使 用 了 两 

次 getElementsByTagName 方法 去 执行 相同 的 操作 ， 浪 费 了 一 次 
搜索 。 更 好 的 办 法 是 把 第 一 次 搜索 的 结果 保存 在 一 个 变量 中 ， 然 后 
在 循环 里 重用 该 结果 ， 比 如 : 





var links = document.getElementsByTagName("a") ; 
if (links.length > 0) ( 
for (var i=@; i«links.length; i++) { 


// 对 每 个 链接 做 点 处 理 





} 
} 








这 桩 一 来 ， 代 人 码 功能 没有 变 ， 但 搜索 DOM 有 的 次 数 由 两 次 降低 到 了 
ie 


前 面 例 子 中 的 问题 还 比较 容易 发 现 。 要 是 你 有 多 个 函数 重复 做 同一 
件 事 ， 恐 怕 就 不 太 好 发 现 了 。 比 如 ， 要 是 有 一 个 函数 检查 每 个 链接 
中 的 popup 类 ， 而 男 外 一 个 函数 检查 每 个 链接 中 的 hover 类 ， 那 么 
同样 也 会 造成 搜索 浪费 。 在 多 个 函数 都 会 取得 一 组 类 似 元 素 的 情况 
下 ， 可 以 考虑 重 构 代 码 ， 把 搜索 结果 保存 在 一 个 全 局 变量 里 ， 或 者 
把 一 组 元 素 直 接 以 参数 形式 传递 给 函数 。 


另 一 个 需要 注意 的 地 方 ， 就 是 要 尽量 减少 文档 中 的 标记 数量 。 过 多 
不 必要 的 元 素 只 会 增加 DOM 树 的 规模 ， 进 而 增加 遍历 DOM 树 以 查 
找 特定 元 素 的 时 间 。 

5.6.2 合并 和 放置 脚本 


本 书 中 的 多 数 示例 都 使 用 外 部 脚本 文件 ， 在 文档 中 通过 <script> 
元 素 把 它们 包含 进来 ， 如 下 所 示 : 























<script src="script/function.js"></script> 











包含 脚本 的 最 佳 方式 就 是 使 用 外 部 文件 ， 因 为 外 部 文件 与 标记 能 清 


晰 地 分 离开 ， 而 且 浏览 器 也 能 对 站 点 中 的 多 个 页 面 重用 缓存 过 的 相 
同 脚 本 。 不 过 ， 类 似 下 面 这 种 情况 ， 最 好 也 不 要 出 现 : 





<script src="script/functionA.js"></script> 
<script src="script/functionB.js"></script> 
<script src="script/functionC.js"></script> 


«script src="script/functionD.js"></script> 





推荐 的 做 法 是 把 functionA.js . functionB.js 
、functionC.js 和 functionD.js 合并 到 一 个 脚本 文件 中 。 这 
样 ， 就 可 以 减少 加 载 页 面 时 发 送 的 请 求 数 量 。 而 减少 请 求 数量 通常 
都 是 在 性 能 优化 时 首先 要 考虑 的 。 


脚本 在 标记 中 的 位 置 对 页 面 的 初次 加 载 时 间 也 有 很 大 影响 。 传 统 
上 ， 我 们 都 把 脚本 放 在 文档 的 <head> 区 域 ， 这 种 放置 方法 有 一 个 
问题 。 位 于 <head> 块 中 的 脚本 会 导致 浏览 器 无 法 并 行 加 载 其 他 文 
件 ( 如 图 像 或 其 他 脚本 〉 。 一 般 来 说 ， 根 据 HTTP 规 范 ， 浏 览 占 每 
次 从 同一 个 域名 中 最 多 只 能 同时 下 载 两 个 文件 。 而 在 下 载 脚本 期 
间 ， 浏 览 器 不 会 下 载 其 他 任何 文件 ， 即 使 是 来 自 不 同 域 名 的 文件 也 
不 会 下 载 ， 所 有 其 他 资源 都 要 等 脚本 加 载 完毕 后 才能 下 载 。 


按照 本 章 前 面 讨 论 的 渐进 增强 和 分 离 JavaScript 观 点 ， 把 <scripty> 

标签 放 到 别 的 地 方 并 不 是 问题 。 把 所 有 <script> 标签 都 放 到 文档 

的 末尾 ，</body> 标记 之 前 ， 束 可 以 让 页 面 变 得 更 快 。 即 使 这 样 ， 

window 对 象 的 1oad 事件 依然 可 以 执行 对 文档 进行 
A BEATE o 


5.6.3 ”压缩 脚本 


在 写 完 了 脚本 ， 做 了 优化 ， 而 且 也 将 它 放 到 文档 中 的 适当 位 置 之 
后 ， 还 有 一 件 事 可 以 加 快 加 载 速度 : 压缩 脚本 文件 。 


所 谓 压缩 脚本 ， 指 的 是 把 脚本 文件 中 不 必要 的 字 节 ， 如 空格 和 注 
释 ， 统 统 删除 ， 从 而 达到 “压缩 ”文件 的 目的 。 好 在 ， 有 很 多 工具 都 
可 以 蔡 你 来 做 这 件 事 。 有 的 精简 程序 其 至 会 重 写 你 的 部 分 代码 ， 使 
用 更 短 的 变量 名 ， 从 而 减少 整体 文件 大 小 。 





























比如 ， 假 设 你 有 如 下 代码 : 


function showPic(whichpic) { 
// 取得 图 片 的 href 属性 
var source = whichpic.getAttribute("href"); 
// 取得 占 位 符 
var placeholder = document.getElementById("placeholder"); 
// 更 新 占 位 符 


placeholder.setAttribute("src",source); 




















// 使 用 图 像 的 title 属性 更 新 文本 描述 
var text = whichpic.getAttribute("title") ; 
var description = document.getElementById("description"); 


























压缩 之 后 的 代码 就 会 变 成 下 面 这 样 


function showPic(a){var b=a.getAttribute("href");document.get 
wElementById("placeholder").setAttribute("src",b);a.getAttribute 
=» ("title");document.getElementById("description")); 








精简 后 的 代码 虽然 不 容易 看 懂 ， 却 能 大 幅 减 少 文件 大 小 。 多 数 情况 
下 ， 你 应 该 有 两 个 版 本 ， 一 个 是 工作 副本 ， 可 以 修改 代码 并 添加 注 
HE 男 一 个 是 精简 副本 ， 用 于 放 在 站 点 上 。 通 常 ， 为 了 与 非 精 人 简 版 
本 区 分 开 ， 最 好 在 精简 副本 的 文件 名 中 加 上 min 字 样 : 





<script src="scripts/scriptName.min.js"></script> 








下 面 是 推荐 给 读者 的 几 个 有 代表 性 的 代码 压缩 工具 : 


e Douglas Crockford 的 
JSMin Chttp://www.crockford.com/javascript/jsmin.html ) ; 


e 雅虎 的 YUI 


Compressor Chttp://developer.yahoo.com/yui/compressor ) ; 


e 谷歌 的 Closure Compiler Chttp://closure- 
compiler.appspot.com/home ) . 


这 些 工具 都 有 选项 ， 可 以 在 必要 时 用 来 最 大 程度 地 压缩 文件 。 


5.7 ”小结 
本 章 介绍 了 一 些 与 DOM 脚 本 编程 工作 有 关 的 概念 和 实践 ， 它 们 
AE 


e 平稳 退化 
e 分 离 JavaScript 
e 辣 后 兼容 
e 性 能 考虑 


在 学 习 和 使 用 Flash 和 和 CSS 等 其 他 一 些 技 术 时 获得 的 经 验 可 以 帮助 我 
Do aeu 只 有 勤 于 思考 、 善 于 借鉴 ， 才 能 编写 出 局 品质 的 
脚本 。 


"hes sU BA E 
hi 


本 章 内 容 


。 把 事件 处 理 函 数 移出 文档 
e HERR 
e dii t RT UI IH] 


ERARE, JEJE Y —" JavaScript Hr Fg. fESB5:8H, RNA 
了 一 些 JavaScript 编 程 最 佳 实践 ， 在 这 一 章 里 ， 我 将 运用 它们 改进 图 
Fr FE 


“ 勤 于 思考 ?是 每 位 有 创新 精神 的 网 页 设计 人 员 都 应 该 具备 的 特质 。 
无 论 是 编写 CSS 脚 本 还 是 JavaScript 脚 本 ， 也 无 论 是 直接 编写 代码 还 
是 使 用 可 视 化 设计 工具 ， 一 名 优秀 的 网 页 设计 人 员 总 是 会 在 每 个 细 
市 上 问 自己 这 样 一 个 问题 “是否 还 有 更 好 的 解决 办 法 ? ” 


正如 在 上 一 章 里 看 到 的 那样 ， 与 DOM 脚 本 编程 工作 有 关 的 问题 不 
外 乎 平稳 退化 、 辐 后 兼容 和 分 离 JavaScript 这 几 大 类 。 这 些 问 题 的 解 
决 方式 和 解决 程度 影响 着 网 页 的 可 用 性 和 可 访问 性 。 














6.1 快速 回顾 


在 第 4 章 里 ， 我 编写 了 一 个 用 来 蔡 换 “ 占 位 符 ” 图 片 的 src 属性 的 脚 
0 pet cea ener een om 








function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
var text = whichpic.getAttribute("title") ; 


var description = document.getElementById("description"); 
description. firstChild.nodeValue = text; 





下 面 是 用 来 调用 此 函数 的 HIMEL 片段 : 


<ul> 
«li» 
«a hrefz"images/fireworks.jpg" onclick="showPic(this);return false 
æ fireworks display"»Fireworks«/a» 
«/li» 
«li» 
«a href="images/coffee. jpg" onclick-"showPic(this); return false; 
=æ black coffee">Coffee</a> 
«/li» 
«li» 
<a href="images/rose. jpg" onclick-"showPic(this); return false; "t 
= rose">Rose</a> 
</li> 
<li> 
<a href="images/bigben. jpg" onclick-"showPic(this); return false; 
= famous clock">Big Ben</a> 
</li> 
</ul> 
«p id-"description"»Choose an image.</p> 
«img id-"placeholder" src="images/placeholder.gif" alt-"my image galle 





现在 ， 为 改进 这 个 解决 方案 ， 我 们 要 提出 几 个 问题 。 


6.2 ‘Esch Ph BI 
第 一 个 问题 是 : “如 果 JavaScript 功 能 被 禁用 ， 会 怎样 ? ” 
仔细 检查 过 代码 后 ， 我 得 出 的 结论 是 我 的 脚本 已 经 为 此 预 留 了 退 


路 : 即使 JavaScript 功 能 已 被 禁用 ， 用 户 也 可 以 浏览 图 片 库 里 的 所 有 
图 片 ， 网 页 里 的 所 有 链接 也 都 可 以 正常 工作 : 


<li> 
«a href="images/fireworks.jpg" onclick="sShowPic(this);return false;" 
æ fireworks display"»Fireworks«/a» 


«/li» 





ERA JavaScript TF ZU Wii P. A aare AE href 属性 给 出 的 
链接 前 进 ， 用 户 将 看 到 一 张 新 图 片 而 不 是 “该 页 无 法 显示 ”之 类 的 出 

音信 息 。 虽 说 用 户 体 验 比 用 JavaScript 的 效果 要 略 差 一 些 ， 但 网 页 的 
基本 功能 并 未 受到 损害 一 一 页 面 上 的 所 有 内 容 都 可 以 访问 。 


如 果 我 当初 选用 的 是 “javascript:” 伪 协议 ， 链 接 将 如 下 所 示 : 





«li» 
«a href="javascript:showPic(' images/coffee.jpg'); return false;"tit 
=æ black coffee">Coffee</a> 


</li> 








如 果 我 把 这 些 链 接 都 写成 上 面 这 样 ， 它 们 在 不 支持 或 禁用 了 
JavaScript 功 能 的 浏览 器 里 将 坚 无 用 处 。 


类 似 地 ， 把 这 些 链接 写成 人 #”? 记 号 也 会 导致 类 似 的 问题 ， 但 令 人 遗 
憾 的 是 ， 这 个 技巧 在 那些 利用 剪贴 操作 “编写 ”的 JavaScript 代 码 里 相 
当 和 常见 。 类 似 于 使 用 “javascript:* 伪 协议 时 的 情况 ， 如 果 当 初 使 用 的 
是 #* 记 号 ， 那 些 没 有 启用 JavaScript 功 能 的 用 户 也 将 无 法 正常 浏览 
我 的 图 片 库 : 





<li> 


«a href="#" onclick="ShowPic(' images/rose.jpg'); return false;"titl 
= rose">Rose</a> 
</li> 











把 href 属性 设置 为 一 个 真实 存在 的 值 不 过 是 举 手 之 苑 ， 但 图 片 库 
却 因此 能 够 平稳 退化 。 虽 说 没有 局 用 JavaScript 功 能 的 用 户 需 要 在 浏 
览 句 里 点 击 “ 后 退 ? 近 钮 才能 重新 看 到 我 的 图 片 清单 ， 但 这 总 比 根本 
看 不 到 要 好 得 多 吧 。 


图 片 库 通过 了 第 一 个 测试 。 








63 CH JavaScript 与 HIML 标 记 是 分 离 的 吗 


下 一 个 问题 与 在 标记 文档 里 调用 JavaScript 代 码 的 方式 有 关 : 文档 的 
结构 与 文档 的 行为 分 开 了 吗 ? 换 句 话说， 网 页 的 行为 层 
(JavaScript) 是 作用 于 其 结构 层 (HTML) 之 上 的 ， 还 是 两 种 代码 
混杂 在 一 起 ? 


具体 到 图 片 库 这 个 例子 ， 答 案 当然 是 “它们 混杂 在 一 起 了 ”。 


事件 处 理 函 数 直接 插入 到 标记 文档 里 的 ， 如 下 
ZN: 








<li> 
<a href="images/bigben.jpg" onclick="showPic(this); return false;"ti 
w clock">Big Ben</a> 


</li> 








理想 情况 下 ， 应 该 在 外 部 文件 里 完成 添加 onclick 事件 处 理 函 数 的 
工作 ， 那 样 才 能 让 标记 文档 没有 “杂质 *， 就 像 下 面 这 样 : 


<li> 
«a href="images/bigben.jpg" title="The famous clock">Big Ben</a> 
</li> 





把 JavaScript 代 码 移 出 HTML 文 档 不 是 难事 ， 但 为 了 让 浏览 器 知道 页 
面 里 都 有 哪些 链接 有 着 不 一 样 的 行为 ， 我 必须 找到 一 种 “挂钩 ”把 
JavaScript 代 码 与 HTML 文 档 中 的 有 关 标 记 关 联 起 来 。 有 多 种 办 法 可 
以 让 我 达到 这 一 目的 。 


可 以 像 下 面 这 样 给 图 片 清单 里 的 每 个 链接 分 别 添加 一 个 如 下 所 示 的 


class 属性 : 


<li> 
«a href="images/bigben. jpg" class-"gallerypic" title="The famous clo 
</li> 
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图 片 清单 里 的 各 个 链接 有 一 个 共同 点 : 它们 都 包含 在 同一 个 列表 清 
单元 素 里 。 给 整个 清单 设置 一 个 独一无二 的 ID 的 办 法 要 简单 得 多 : 


<ul id="imagegallery"> 
<li> 
<a href="images/fireworks. jpg" title="A fireworks display">Firewor 
</li> 
<li> 
«a href="images/coffee.jpg" title="A cup of black coffee">Coffee</ 
</li> 
<li> 


«a href-"images/rose.jpg" title-"A red, red rose">Rose</a> 
</li> 
<li> 


«a href="images/bigben.jpg" title="The famous clock">Big Ben</a> 
</li> 
</ul> 





你 将 看 到 ， 虽 然 只 有 这 一 个 “挂钩 ”， 但 对 JavaScript 来 说 已 经 足够 
dias 


6.3.1. 添加 事件 处 理 函 数 


现在 ， 需 要 编写 一 个 简短 的 函数 把 有 关 操 作 关 联 到 onclick 事件 
上 。 我 将 其 命名 为 prepareGallery . 


下 面 是 我 想 让 这 个 函数 完成 的 工作 。 


e 检查 当前 浏览 占 是 否 理 解 getElementsByTagName . 


检查 当前 浏 理解 getELementById 。 
检查 当前 网 页 是 否 存在 一 个 id 为 imagegallery 的 元 素 。 
Io imasegallery 元 素 中 的 所 有 链接 。 
设置 onclick 事件 ， 让 它 在 有 关 链 接 被 点 击 时 完成 以 下 操作 : 
o 把 这 个 链接 作为 参数 传递 给 showPic 函数 ; 
o BS 点 击 时 的 默认 行为 ， 不 让 浏览 器 打开 这 个 链 








我 将 从 定义 prepareGallery 函数 开始 。 这 个 函数 不 需要 参数 ， 所 
以 在 这 个 函数 名 字 后 面 的 圆 括号 里 用 不 着 写 出 任何 东西 : 








function prepareGallery() { 





a. AEE A 


我 想 做 的 第 一 件 事 是 检查 当前 浏览 器 是 否 理 解 名 

为 getElementsByTagName 的 DOM 方 法 。 我 将 在 这 个 函数 里 
使 用 这 个 方法 ， 需 要 保证 不 理解 这 个 方法 的 老 浏览 器 不 会 执行 
这 个 函数 : 














if (!document.getElementsByTagName) return false; 





这 条 if 语句 相当 于 这 样 一 句 话 :“ 如 果 
getElementsByTagName 未 定义 ， 请 现在 就 离开 。” 理 解 这 个 
DOM 方 法 的 浏览 器 将 继续 执行 。 


现在 ， 对 名 为 getElementById 的 DOM 方 法 进行 同样 的 检 
查 ， 因 为 我 的 函数 也 会 用 到 这 个 方法 : 


if (!document.getElementById) return false; 








可 以 把 这 两 项 检查 组 合 在 一 起 : “只 要 你 不 理解 这 两 个 方法 中 
的 其 中 一 个 ， 请 立刻 离开 ”: 


if (!document.getElementsByTagName || !document.getElementById)re 


var supported - document.getElementsByTagName && document.getElem 
if ( !supported ) return; 





不 过 ， 上 面 这 样 的 代码 开始 变 得 比较 元 长 并 难以 阅读 。 事 实 
上 ， 从 可 读 性 的 角度 看 ， 把 多 项 测试 写 在 同一 行 上 的 做 法 不 一 
定 是 最 好 的 主意 。 有 不 少 程序 员 喜 欢 像 下 面 这 样 把 return 语 
句 单独 写 在 一 行 上 : 








if (!document.getElementsByTagName ) 
return false; 

if (!document.getElementById) 
return false; 





如 果 你 也 喜欢 这 样 的 写法 ， 建 议 最 好 是 用 花 括号 把 return if 
句 括 起 来 ， 如 下 所 示 : 


if (!document.getElementsByTagName) { 
return false; 


if (!document.getElementById) { 


return false; 


} 





这 或 许 是 最 清晰 、 最 具有 可 读 性 的 代码 书写 方式 。 

把 这 些 测试 写 在 同一 行 上 还 是 写成 好 几 行 是 你 的 自由 ， 你 完 
可 以 根据 自己 的 喜好 来 选择 。 

完成 这 两 项 具有 普 裔 适用 性 的 测试 后 ， 我 还 安排 了 一 个 更 具 针 
对 性 的 测试 。 我 正在 编写 的 这 个 函数 将 处 理 id 等 于 
imagegallery 的 那个 元 素 所 包含 的 链接 ， 假 如 这 个 元 素 并 不 
存在 ， 我 的 这 个 函数 也 就 无 需 继 续 执行 了 。 


与 前 面 两 项 测试 一 样 ， 我 将 使 用 “ 远 辑 非 ” 操 作 符 来 进行 这 一 测 


试 


if (!document.getElementById("imagegallery")) return false; 
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if (!document.getElementById("imagegallery")) { 
return false; 





这 项 测试 是 一 个 预防 性 措施 。 现 在 我 知道 调用 这 个 JavaScript 函 
数 的 文档 里 有 一 个 id 属性 值 等 于 imagegallery 的 列表 清单 元 
素 ， 但 我 不 敢 确 定 这 在 将 来 会 不 会 发 生变 化 。 有 了 这 个 预防 性 
彰 施 ， 即 使 以 后 我 决定 从 网 页 上 删 掉 图 片 库 ， 也 用 不 着 担心 这 
个 网 页 的 JavaScript 代 码 会 突然 出 错 。 把 HTML 文 档 的 内 容 与 
JavaScript 代 码 所 实现 的 行为 分 离开 来 的 重要 性 由 此 可 见 一 斑 。 
作为 一 条 原则 ， 如 果 想 用 JavaScript 给 某 个 网 页 添加 一 些 行为 ， 
就 不 应 该 让 JavaScript 代 码 对 这 个 网 页 的 结构 有 任何 依赖 。 


结构 化 程序 设计 备 瑟 
我 们 在 学 校 里 学 过 一 种 理论 ， 叫 结构 化 程序 设计 Cstructed 





programming) 。 其 中 有 这 样 一 条 原则 : 函数 应 该 只 有 一 
个 入 口 和 一 个 出 口 。 


我 刚才 的 做 法 已 经 违背 了 这 一 原则 : 我 

在 prepareGallery() i 函数 的 开头 部 分 使 用 了 多 

条 return false 语句 ， 它 们 全 都 是 这 个 函数 的 出 口 。 根 
据 结构 化 程序 设计 理论 ， 应 该 把 这 些 出 口 点 减少 到 一 个 。 


从 理论 上 讲 ， 我 很 赞同 这 项 原则 ; 但 在 实际 工作 中 ， 过 分 
拘泥 于 这 项 原则 往往 会 使 代码 变 得 非常 难以 阅读 。 如 果 为 
了 避免 留 下 多 个 出 口 点 而 去 改写 那些 if 语句 的 话 ， 这 个 
函数 的 核心 代码 就 会 被 措 埋 在 一 层 又 一 层 的 花 括号 里 ， 就 
像 下 面 这 样 : 








function prepareGallery() { 
if (document.getElementsByTagName) { 
if (document.getElementById) { 
if (document.getElementById("imagegallery")) ( 
statements go here... 





我 个 人 认为 ， 如 果 一 个 函数 有 多 个 出 口 ， 只 要 这 些 出 口 集 
中 出 现在 函数 的 开 尖 部 分 ， 就 是 可 以 接受 的 。 


出 于 可 读 性 的 考虑 ， 我 把 那些 return false 语句 全 部 集中 
到 prepareGallery 的 开头 部 分 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 


if (!document.getElementById("imagegallery")) return false; 








必要 的 测试 和 检查 工作 就 绪 之 后 ， 我 现在 开始 写 事 件 处 理 函 数 
的 核心 功能 。 


. 变量 名 里 有 什么 
自 先 ， 我 想 把 事情 弄 得 稍微 简单 些 ， 重 复 多 次 地 融入 像 
document.getElementById("image gallery") 这 么 长 的 


Eo CUN 所 以 我 决定 创建 一 个 名 为 gallery 的 变量 来 
简化 它 : 











var gallery = document.getElementById("imagegallery"); 





完全 可 以 给 变量 起 一 个 男 外 的 名 字 。 我 之 所 以 选用 “gallery” 来 
命名 ， 征 因为 它 的 含义 就 是 图 片 库 。 选 择 一 些 有 意义 的 单词 来 
命名 可 以 让 代码 更 容易 阅读 和 理解 。 


注意 ”在 为 变量 命名 时 一 定 要 谨慎 从 事 。 有 些 单词 在 
JavaScript 语 言 里 有 特殊 的 含义 和 用 途 ， 这 些 统称 为 “保留 
字 ” 的 单词 不 能 用 做 变量 名 。 另 外 ， 现 有 JavaScript 函 数 或 
方法 的 名 字 也 不 能 用 来 命名 变量 。 不 要 使 用 诸如 alert 
. var 或 if 之 类 的 单词 作为 变量 的 名 字 。 


按照 计划 ， 需 要 遍历 imagegallery 元 素 中 的 所 有 链接 ， 我 会 
用 到 getElementsByTagName 。 利 用 刚刚 创建 的 gallery 变 

量 ， 可 以 把 对 getElementsByTagName 的 调用 简单 地 写成 下 

面 这 个 样子 : 











gallery.getElementsByTagName("a") 





它 等 价 于 下 面 这 个 长 长 的 记号 : 


document. getElementById("imagegallery").getElementsByTagName("a" ) 


pO 


现在 ， 我 想 把 事情 弄 得 更 简单 些 。 我 决定 把 上 面 这 个 记号 所 代 
表 的 数组 (更 准确 地 说 ， 是 一 个 节点 列表 〉 赋值 给 一 个 短 变 
量 ， 并 将 该 变量 命名 为 links : 


var links = gallery.getElementsByTagName("a"); 





下 面 是 prepareGallery 函数 目前 的 样子 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document. getElementById("imagegallery") ; 
var links = gallery.getElementsByTagName("a") ; 





准备 工作 已 就 绪 。 我 已 经 安排 好 了 必要 的 检查 工作 ， 还 创建 了 
儿 个 变量 。 


. 3b] 


TOR D; kb PE Links 数组 里 的 各 个 元 素 ， 可 以 用 一 个 for 循环 
来 完成 这 项 工作 。 

首先 ， 把 计数 器 的 初始 值 设 置 为 零 。 每 处 理 links 数组 里 的 一 
T M ME 下 面 是 对 计数 器 进行 初始 
化 ie a): 








把 充当 循环 计数 器 的 变量 命名 为 “i” 是 一 种 传统 做 法 。 字 
母 汪 在 这 里 的 含义 是 “increment”( 递 增 ) ， 许 多 程序 设计 语言 
里 都 习惯 使 用 “作为 递增 的 变量 的 名 字 。 


下 面 是 这 个 循环 的 控制 条 件 : 


i « links.length; 


上 面 这 个 表达 式 的 含义 是 : 只 要 变量 i 的 值 小 于 links 数组 的 
length 属性 值 ， 这 个 for 循环 就 一 直 循 环 下 去 。length 的 值 
总 是 等 于 links 数组 里 的 元 素 总 个 数 。 因 此 ， 如 果 1links 数组 
cn um 那么 只 要 i 小 于 4， 我 的 for 循环 就 将 一 直 循 环 
TFA, 
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i++; 





这 个 记号 是 下 面 这 条 语句 的 简写 形式 : 


i = i+1; 


上 面 这 几 条 语句 的 效果 是 : 这 个 for 循环 每 执行 一 次 ， 变 量 i 
的 值 就 会 加 1; 一 旦 变量 i 的 值 不 再 小 于 links .length ， 循 环 
就 结束 。 因 此 ， 如 果 1inks 数组 包含 4 个 元 素 ， 这 个 循环 将 在 i 
等 于 4 时 结束 执行 。 这 个 循环 将 总 共 执 行 4 次 一 一 别 态 了 ， 变 量 
i 是 从 零 开 始 计数 的 。 


下 面 是 for 循环 的 开头 部 分 : 





Ooo 


. BTA 


具体 到 这 个 例子 ， 我 想 要 完成 的 操作 是 改变 links 数组 中 的 各 
个 元 素 的 行为 。 事 实 上 ， 与 其 说 links 是 一 个 数组 ， 不 如 说 它 
是 一 个 节点 列表 (node list) 来 得 更 准确 。 它 是 一 个 由 DOM 节 
A 这 个 集合 里 的 每 个 节点 都 有 自己 的 属性 和 方 

法 。 


我 最 感 兴趣 的 是 它 的 onclick 方法 ， 像 下 面 这 样 为 它 添 加 一 个 
TA: 


links[i].onclick = function() { 


这 条 语句 定义 了 一 个 匿名 函数 。 这 是 一 种 在 代码 执行 时 创建 函 
数 的 办 法 。 有 具体 到 上 面 这 条 语句 ， 它 把 links[i] TAM 
onclick 事件 处 理 函数 指定 为 这 个 匿名 函数 。 这 个 匿名 函数 里 
的 所 有 语句 将 在 links[i] 元 素 所 对 应 的 链接 被 点 击 时 执行 。 


links[i] 元 素 的 值 会 随 着 变量 i 的 递增 而 变化 。 如 果 假 设 
links 集合 里 包含 4 个 元 素 ， 那 么 第 一 个 元 素 将 是 links[6] ， 
最 后 一 个 元 素 是 links[3] 。 


我 传递 给 showPic 函数 的 参数 是 关键 字 this ， 它 代表 此 时 此 
刻 与 onclick 方法 相关 联 的 那个 元 素 。 也 就 是 说 ，this 在 这 
里 代表 links[i] ， 而 links[i] 又 对 应 着 links 节点 列表 里 
的 某 个 特定 的 节点 : 


showPic(this) ; 











我 还 需要 再 多 做 一 件 事 ， 即 禁用 有 关 链 接 的 默认 行为 。 如 果 
showPic() 函数 执行 成 功 ， 惑 不 让 浏览 圳 执行 某 个 链接 被 点 击 
时 的 默认 操作 。 和 以 前 一 样 ， 我 想 取 消 这 种 默认 行为 ， 不 让 浏 
哎 占 前 进 到 那个 链接 所 指向 的 目的 地 : 


return false; 


返回 布尔 值 false 相当 于 加 浏览 恬 传 递 了 这 样 一 条 消息:“ 按 
照 这 个 链接 没 被 点 击 的 情况 采取 行动 。” 

最 后 ， 还 需要 用 一 个 右 花 括号 来 结束 这 个 匿名 函数 。 下 面 是 我 
最 终 完 成 的 匿名 函数 : 


links[i].onclick = function() ( 
showPic(this); 
return false; 


} 





e. 完成 JavaScript 函 数 
现在 ， 需 要 用 一 个 右 花 括号 来 结束 for 循环 : 


for ( var i=@; i < links.length; i++) { 
links[i].onclick = function() ( 
showPic(this) ; 
return false; 


} 
} 





最 后 ， 再 用 一 个 右 花 括号 结束 prepareGallery 函数 。 下 面 是 
这 个 函数 完整 代码 清单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document. getElementById("imagegallery") ; 
var links = gallery.getElementsByTagName("a") ; 
for ( var i=@; i < links.length; i++) { 
links[i].onclick = function() { 


showPic(this) ; 
return false; 





调用 此 函数 ， 就 会 把 onclick 事件 绑 定 到 id 等 
于 “imagegallery” 的 元 素 内 的 各 个 链接 元 素 上 。 


注意 ”如果 想 了 解 JavaScript 的 其 他 信息 ， 可 以 参考 Aaron 
Gustafon 5 RS E l']JAdvanced DOM Scripting: Dynamic 
Web Design Techniques (Apress, 2007) . 


6.3.2 tt=onload 事件 
我 必须 执行 prepareGallery 函数 才能 对 onclick 事件 进行 绑 
定 。 


如 采 马 上 执行 这 个 函数 ， 它 将 无 法 完成 其 工作 。 如 来 在 HTML 
文档 完成 加 载 之 前 执行 脚本 ， 此 时 DOM 是 不 完整 的 。 具 体 

fllprepareGallery 函数 ， 它 的 第 3 行 代 码 将 测 

试 "imagegallery" 元 素 是 否 存 在 ， 如 果 DOM 不 完整 ， 这 项 

测试 的 准确 性 就 无 从 谈 起 ， 事 态 的 发 展 就 会 偏离 我 的 计划 。 


应 该 让 这 个 函数 在 网 页 加 载 完毕 之 后 立刻 执行 。 网 页 加 载 完毕 
时 会 触发 一 个 onload 事件 ， 这 个 事件 与 window 对 象 相关 联 。 
为 了 让 事态 的 发 展 不 偏离 计划 ， 必 须 把 prepareGallery 函数 
绑 定 到 这 个 事件 上 : 


window.onload = prepareGallery; 


| 


它 解决 了 我 的 问题 ， 但 像 现在 这 样 还 不 够 完美 。 


假设 我 有 两 个 函数 : firstFunction 和 secondFunction 。 
如 果 想 让 它们 俩 都 在 页 面 加 载 时 得 到 执行 ， 我 该 怎么 办 ? 如 果 
把 它们 逐一 绑 定 到 onload 事件 上 ， 它 们 当中 将 只 有 最 后 那个 
才 会 被 实际 执行 : 


window.onload = firstFunction; 
window.onload = secondFunction; 





个 事件 处 理 函 数 只 能 绑 定 一 条 指令 。 


有 一 种 办 法 可 以 让 我 避 过 这 一 难题 : 可 以 先 创建 一 个 匿名 函数 
ur 然后 把 那个 匿名 函数 绑 定 到 onload 事件 
E, 0 下 所 示 : 


window.onload = function() { 
firstFunction(); 
secondFunction(); 


} 








它 确 实 能 很 好 地 工作 一 一 在 需要 绑 定 的 函数 不 是 很 多 的 场合 ， 
这 应 该 是 最 简单 的 解决 方案 了 。 


这 里 还 有 一 个 弹性 最 佳 的 解决 方案 一 一 不 管 你 打算 在 页 面 加 载 
完毕 时 执行 多 少 个 函数 ， 它 都 可 以 应 付 自 如 。 这 个 方案 需要 额 
外 编写 一 些 代 码 ， 但 好 处 是 一 旦 有 了 那些 代码 ， 把 函数 绑 定 
到 window.on1load 事件 就 非常 易 行 了 。 














这 个 函数 的 名 字 是 addLoadEvent ， 它 是 由 Simon Willison Cif 
见 http://simon.incutio.com ) 编写 的 。 它 只 有 一 个 参数 : 打算 在 
页 面 加 载 完 毕 时 执行 的 函数 的 名 字 。 


下 面 是 addLoadEvent 函数 将 要 完成 的 操作 。 


e 把 现 有 的 window.onload 事件 处 理 函 数 的 值 存 入 变量 
oldonload 。 

。 如 果 在 这 个 处 理 函 数 上 还 没有 绑 定 任何 函数 ， 束 像 平 时 那 
样 把 新 函数 添加 给 它 。 

e 如 果 在 这 个 处 理 函 数 上 已 经 绑 定 了 一 些 函 数 ， 就 把 新 函数 
奶 加 到 现 有 指令 的 末尾 。 


下 面 是 addLoadEvent 函数 的 代码 清单 : 








function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 


func(); 





这 将 把 那些 在 页 面 加 载 完毕 时 执行 的 函数 创建 为 一 个 队列 。 如 
只 需 写 出 以 下 代 
GT Y: 


addLoadEvent (firstFunction) ; 
addLoadEvent (secondFunction) ; 





我 友 现 这 个 函数 非 向 实用 ， 尤 其 是 在 代码 变 得 越 来 越 复杂 的 时 


候 。 无 论 打算 在 页 面 加 载 完毕 时 执行 多 少 个 函数 ， 只 要 多 写 一 
条 语句 就 可 以 安排 好 一 切 。 


这 个 解决 方案 对 prepareGallery 函数 来 说 好 像 有 点 儿 大 材 小 
用 ， 因 为 只 有 这 一 个 函数 需要 在 页 面 加 载 完毕 时 执行 。 可 是 ， 
为 以 后 的 扩展 做 一 些 准 备 工 作 总 不 是 件 坏事 。 我 决定 把 
addLoadEvent 函数 收录 到 我 的 脚本 里 ， 这 使 我 只 需 写 出 下 面 
这 行 代码 就 可 以 了 : 


addLoadEvent(prepareGallery) ; 


到 这 一 步 ，prepareGallery 函数 已 经 足够 安全 了 ， 至 少 在 我 
的 能 力 范 围 内 。 接 下 来 ， 我 将 怀疑 的 目光 转 问 第 4 章 编写 的 
showPic Pf AN. 














6.4 不 要 做 太 多 的 假设 


我 在 showPic 函数 里 发 现 的 第 一 个 问题 是 ， 我 没有 让 它 进 行 任 
何 测 试 和 检查 。 


showPic 函数 将 由 prepareGallery 函数 调用 ， 而 我 已 经 在 后 
者 的 开头 对 getE1LementById fligetElementsByTagName 等 
DOM 方 法 是 否 存 在 进行 过 检查 ， 所 以 我 确切 地 知道 用 户 的 浏 
览 器 不 会 因为 不 理解 这 两 个 方法 而 出 问题 。 


不 过 ， 我 还 是 做 出 了 太 多 的 假设 。 别 的 先 不 说 ， 我 在 代码 里 用 
到 了 id 属性 值 等 于 placeholder flidescription 的 元 素 ， 但 
我 并 未 对 这 些 元 素 是 否 存在 做 任何 检查 : 





function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder. setAttribute("src",source); 
var text = whichpic.getAttribute("title"); 


var description = document.getElementById("description"); 
description. firstChild.nodeValue = text; 





需要 增加 一 些 语句 来 检查 这 些 元 素 是 否 存在 。 


showPic 函数 负责 完成 两 件 事 : 一 是 找 出 id 属性 值 

是 placeholder 的 图 片 并 修改 其 src 属性 ， 二 是 找 出 id 属性 
是 description 的 元 素 并 修改 其 第 一 个 子 元 素 (firstChild 
) 的 nodeValue 属性 。 第 一 件 事 是 这 个 函数 必须 完成 的 任务 ， 
第 二 件 事 只 是 一 项 锦上添花 的 补充 。 因 此 ， 我 决定 把 检查 工作 
分 成 两 个 步骤 以 获得 这 样 一 种 效果 : 只 要 placeholder 图 片 
存在 ， 即 使 description 元 素 不 存在 ， 切 换 显 示 新 图 片 的 操 
作 也 将 照常 进行 。 


正如 你 在 prepareGallery 函数 里 看 到 的 那样 ， 检 查 某 个 特定 





的 元 素 是 否 存 在 是 一 件 很 简单 的 事情 : 


if (!document.getElementById("placeholder")) return false; 





紧 随 其 后 的 是 用 来 修改 placeholder 图 片 的 src 属性 的 代码 ， 
它们 的 效果 是 切换 显示 一 张 新 图 片 : 


var source = whichpic.getAttribute("href") ; 
var placeholder = document. getElementById( "placeholder" ) ; 
placeholder. setAttribute("src",source); 








以 上 代码 负责 完成 函数 的 主要 任务 。 接 下 来 ， 采 用 一 种 稍 有 不 
同 的 方法 检查 description 元 素 是 否 存在 : 





if (document.getElementById("description")) { 





只 有 通过 了 这 项 检查 ， 负 责 修改 图 片 说 明文 字 的 代码 才 会 得 到 
执行 ， 如 下 所 示 : 


var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


} 





将 描述 部 分 放 在 if 语句 里 后 ，description 元 素 将 是 可 选 
的 。 如 果 它 存在 ， 它 将 被 更 新 ， 否 则 会 忽略 。 


return true; 


pO 


下 面 是 showPic 函数 在 我 给 它 增 加 了 检查 之 后 的 代码 清单 : 


function showPic(whichpic) { 
if (!document.getElementById("placeholder")) return false; 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
if (document.getElementById("description")) { 
var text - whichpic.getAttribute("title"); 


var description - document.getElementById("description"); 
description.firstChild.nodeValue = text; 
} 


return true; 





改进 后 的 showPic() 函数 不 再 假设 有 关 标 记 文 档 里 肯定 存在 
着 placeholder 图 片 和 description 元 素 。 即 使 文档 里 没 
^Hplaceholder 图 片 ， 也 不 会 发 生 任何 JavaScript 错 误 。 


可 是 ， 还 有 一 个 问题 : 如果 把 placeholder 人 
里 删 挥 并 在 浏览 器 里 刷新 这 页 面 ， 就 会 出 现 这 种 情况 ， 无 论 
iimagegallery 清单 里 的 哪 一 个 链接 ， 都 没有 任何 响应 。 


这 意味 痢 我 们 的 脚本 不 能 平稳 退化 。 此 时 ， 应 该 让 浏览 器 打开 
那个 被 点 击 的 链接 ， 而 不 是 让 什么 事情 都 不 发 生 。 


问题 在 于 prepareGallery 函数 做 出 了 这 样 一 个 假 
B showPic 函数 肯定 会 正常 返回 。 基 于 这 一 假 
设 ，prepareGallery 函数 取消 了 onclick 事件 的 默认 行为 : 





links[i].onclick = function() { 
showPic(this); 
return false; 


} 


PO 


是 否 要 返回 一 个 false 值 以 取消 onclick 事件 的 默认 行为 ， 其 
实 应 该 由 showPic 函数 决定 。 


showPic 应 返回 两 个 可 能 的 值 。 


e 如 果 图 片 切 换 成 功 ， 返 回 true 。 
e 如 果 图 片 切换 不 成 功 ， 返 回 false 。 


为 修正 这 个 问题 ， 应 该 在 返回 前 验证 showPic 的 返回 值 ， 以 便 
决定 是 否 阻止 默认 行为 。 如 果 showPic 返回 true ， 那 么 更 新 
placeholder 。 在 onclick 事件 处 理 函 数 中 ， 我 们 可 以 利 
FA“! ”对 showPic 的 返回 值 进 行 取 反 。 


links[i].onclick = function() { 
return !showPic(this) ; 


} 





现在 ， 如 果 showPic 返回 true ， 我 们 就 返回 false ， 浏 览 器 
不 会 打开 那个 链接 。 


如 果 showPic 返回 false ， 那 么 我 们 认为 图 片 没有 更 新 ， 于 是 
返回 true 以 允许 默认 行为 发 生 。 


下 面 是 prepareGallery 函数 现在 的 代码 清单 : 





function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery - document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a") ; 
for ( var i=@; i < links.length; i++) { 
links[i].onclick = function() { 
return !showPic(this) ; 
} 
} 


BEN 
经 过 一 番 周 扩 ， 终 于 把 最 后 一 个 已 知 问题 解决 了 了 。 如 果 
placeholder 图 片 不 存在 ， 浏 览 器 将 按 用 户 所 氮 击 的 那个 链 


接 打 开 一 张 新 图 片 。 现 在 可 以 把 placeholder 图 片 重 新 放 回 
到 标记 里 去 了 。 





65 ”优化 
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们 对 标记 的 依赖 和 假设 已 经 比 原 先 少 多 了 。 


尽管 如 此 ， 在 showPic 函数 里 仍 存在 一 些 需 要 处 理 的 假设 。 
比如 说 ， 假 设 每 个 链接 都 有 一 个 title 属性 : 





var text = whichpic.getAttribute("title"); 








为 了 检查 title 属性 是 否 真 的 存在 ， 可 以 测试 它 是 不 是 等 于 
null : 


if (whichpic.getAttribute("title") != null) 








如 果 title 属性 存在 ， 这 个 if 表达 式 将 被 求 值 为 true 。 如 果 
title 属性 不 存在 ，whichpic.getAttribute("title") 将 
等 于 nul1 ， 而 这 个 if 表达 式 将 被 求 值 为 false 。 

这 个 if 表达 式 还 可 以 简写 为 : 


if (whichpic.getAttribute("title")) 








只 要 title 属性 存在 ， 这 个 if 表达 式 就 将 返回 一 个 true 值 。 





作为 一 种 简单 的 视觉 反馈 ， 在 title 属性 不 存在 时 把 变量 text 
的 值 设置 为 空 字符 串 : 


if (whichpic.getAttribute("title")) ( 

var text - whichpic.getAttribute("title"); 
) else { 

var text = ""; 


} 





下 面 是 完成 同样 操作 的 另 一 种 办 法 : 


var text = whichpic.getAttribute("title") ? whichpic.getAttribute 





紧 跟 在 getAttribute 后 面 的 问号 是 一 个 三 元 操作 符 (ternary 
operator) 。 这 个 问号 的 后 面 是 变量 text 的 两 种 可 取 值 。 如 果 
getAttribute("title") 的 返回 值 不 是 null text 变量 将 
被 赋值 为 第 一 个 值 ， 如 果 getAttribute("title") 的 返回 值 
是 null ，text 变量 将 被 赋值 为 第 二 个 值 : 





variable = condition ? if true : if false; 








如 果 title 属性 存在 ， 变 量 text 将 被 赋值 
为 whichpic.getAttribute("title") 。 如 果 title 属性 不 
存在 ， 变 量 text 将 被 赋值 为 一 个 空 字 符 串 C"). 


三 元 操作 符 是 if/else 语句 的 一 种 变 体形 式 。 它 比较 简短 ， 但 
逻辑 关系 表达 得 不 那么 明显 。 如 果 你 也 这 么 认为 ， 那 就 使 

用 if/else 语句 好 了 。 

现在 ， 如 果 试 图 把 imagegallery 清单 里 的 某 个 链接 的 title 
属性 删 掉 并 重新 加 载 这 个 页 面 ， 当 你 再 去 点 击 那 个 链接 的 时 
候 ，description 元 素 将 被 填 入 一 个 空 字 符 串 。 


如 果 想 做 到 十 全 十 美的 话 ， 可 以 对 任何 一 种 情况 进行 检查 。 








比如 说 ， 检 查 placeholder 元 素 是 否 存 在 ， 但 需要 假设 那 是 
一 张 图 片 。 为 了 验证 这 种 情况 ， 可 以 用 nodeName 属性 来 增加 
一 项 测试 : 


if (placeholder.nodeName != "IMG") return false; 





请 注意 ，nodeName 属性 总 是 返回 一 个 大 写字 母 的 值 ， 即使 元 
素 在 HTML 文 档 里 是 小 写字 母 。 


我 还 可 以 引入 更 多 的 检查 。 比 如 说 ， 假 设 description 元 素 
的 第 一 个 子 元 素 (firstchild) 是 一 个 文本 节点 。 我 应 该 对 
此 进行 检查 。 


可 以 利用 nodeType 属性 来 进行 这 项 检查 。 还 记得 吗 ， 文 本 节 
点 的 nodeType 属性 值 等 于 3: 








if (description.firstChild.nodeType == 3) ( 
description. firstChild.nodeValue = text; 


} 








下 面 是 引入 了 以 上 几 项 检查 之 后 showPic 函数 的 代码 清单 : 


function showPic(whichpic) { 
if (!document.getElementById("placeholder")) return false; 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
if (placeholder.nodeName != "IMG") return false; 
placeholder. setAttribute("src",source); 
if (document.getElementById("description")) { 


var text = whichpic.getAttribute("title") ? whichpic.getAttri 
var description - document.getElementById("description"); 
if (description.firstChild.nodeType -- 3) ( 
description.firstChild.nodeValue - text; 
I 
j 


return true; 





MEE 
因为 又 增加 了 几 项 检查 ，showPic() 函数 里 的 代码 变 得 更 多 
了 。 在 实际 工作 中 ， 你 要 自己 决定 是 否 真 的 需要 这 些 检查 。 它 
们 针对 的 是 HTML 文 档 有 可 能 不 在 你 控制 范围 内 的 情况 。 理 想 
情况 下 ， 你 的 脚本 不 应 该 对 HTML 文 档 的 内 容 和 结构 做 太 多 的 


假设 。 


这 方面 的 决定 需要 根据 具体 情况 来 做 出 。 





6.6 ”键盘 访问 


下 面 是 prepareGallery() 函数 中 的 核心 代码 : 


links[i].onclick = function() { 
if (showPic(this)) { 
return false; 
} else { 


return true; 
} 
} 





首先 ， 为 了 简洁 ， 将 它 改 为 使 用 三 元 运算 符 。 


links[i].onclick = function() { 
return showPic(this) ? false : true; 


} 








这 段 代 码 本 里 没有 任何 毛病 。 当 这 个 链接 被 点 击 
时 ，showPic() 函数 就 开始 执行 。 不 过 ， 这 作 了 一 个 假定 : 用 
户 只 会 使 用 鼠标 来 点 击 这 个 链接 。 


但 是 ， 千 万 不 要 瑟 记 并 非 所 有 的 用 尸 都 使 用 鼠标 。 比 如 广 ， 有 
视力 残疾 的 用 户 往 往 无 法 看 清 屏幕 上 四 处 移动 的 鼠标 指针 ， 他 
们 往往 更 喜欢 使 用 键盘 。 


作为 一 个 众所周知 的 事实 ， 不 使 用 鼠标 也 可 以 浏览 Web。 键 盘 
上 的 Tab 键 可 以 让 我 们 从 这 个 链接 移动 到 另 一 个 链接 ， 而 按 下 
回 车 键 将 局 用 当前 链接 。 





有 个 名 叫 onkeypress HY S34 Ab EE PG Bie & D] HJ OK ch PEE SES 
件 的 。 按 下 键盘 上 任何 一 个 按键 都 会 触发 onkeypress 事件 。 


如 果 想 让 onkeypress 事件 与 onclick 事件 触发 同样 的 行为 ， 
可 以 简单 地 把 有 关 指 令 复制 一 份 : 





links[i].onclick = function() ( 
return showPic(this) ? false : true; 


links[i].onkeypress = function() { 


return showPic(this) ? false : true; 


} 





还 有 一 种 更 简单 的 办 法 可 以 确保 onkeypress 模仿 onclick ¥ 
件 的 行为 : 


links[i].onkeypress = links[i].onclick; 


上 面 这 条 语句 把 onclick 事件 的 所 有 功能 赋 给 onkeypress ¥ 
件 : 





links[i].onclick = function() { 
return showPic(this) ? false : true; 


links[i].onkeypress = links[i].onclick; 





这 就 是 JavaScript E; HTML 分 离 带 来 的 方便 。 


如 果 你 已 经 把 所 有 的 函数 和 事件 处 理 函 数 都 放 在 了 外 部 文件 
里 ， 就 可 以 只 在 必要 时 修改 JavaScript 代码 ， 而 根本 不 用 动 
HTML 文件 。 你 可 以 随时 打开 你 的 脚本 文件 ， 优 化 和 它们， 你 做 
出 的 修改 将 自动 作用 于 每 个 引用 了 它 的 网 页 。 
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JavaScript 功 能 之 后 ， 你 可 能 需要 打开 HTML 文档 去 进行 大 量 的 
修改 。 比 如 说 ， 在 图 片 库 这 个 例子 里 ， 我 当初 曾 使 用 过 一 些 如 
下 所 示 的 内 和 伦 事件 处 理 函 数 : 


<li> 
«a href="images/fireworks.jpg" onclick="ShowPic(this);return fa 
fireworks display">Fireworks</a> 


</li> 





在 对 showPic() 函数 返回 true false 的 情况 做 出 调整 之 
后 ， 我 不 得 不 对 HTML 文档 里 的 onclick 事件 处 理 函 数 做 出 相 
应 的 修改 ， 如 下 所 示 : 


<li> 

<a href="images/fireworks.jpg" onclick="return showPic(this) ? 
æ title-"A fireworks display"»Fireworks«/a» 
</li> 
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设想 一 下 ， monkeyp ess 事件 处 理 函 数 ， 就 不 得 不 
找 由 所 有 的 链接 ， 给 它们 每 个 增加 一 个 内 租 事 件 处 理 函数 : 


«li» 

«a href="images/fireworks.jpg" onclick="return showPic(this) ? 
æ onkeypress-"return showPic(this) ? false : true;" 
æ title-"A fireworks display"»Fireworks«/a» 


«/li» 











Re AHA SERRE S EE RO 。 而 现在 我 只 修 
改 了 很 少儿 条 语句 就 把 一 切 安 排 受 当 。 





小 心 onkeypress 


我 最 后 的 决定 是 不 添加 onkeypress 事件 处 理 函 数 。 原 因 是 这 
个 事件 处 理 函 数 很 容易 出 问题 。 用 户 每 按 下 一 个 按键 都 会 触发 
它 。 在 某 些 浏览 器 里 ， 甚 至 包括 Tab 键 ! 这 意味 着 如 果 绑 定 
在 onkeypress 事件 上 的 处 理 函 数 上 返回 的 是 false ， 那 些 只 
使 用 键盘 访问 的 用 户 将 永远 无 法 离开 当前 链接 。 我 的 图 片 库 网 
页 就 存在 这 样 的 问题 一 -只 要 图 片 切换 成 功 ，showPic 函数 就 
将 返回 false 。 


这 些 只 使 用 键盘 的 人 可 怎么 办 ? 


第 运 的 是 ，onclick EPF ARSE E B FERRA TIE A fS EO DI 虽然 
它 的 名 字 “ondlick” 给 人 一 种 它 只 与 鼠标 点 击 动作 相关 联 的 印 
象 ， 但 事实 却 并 非 如 此 : 在 几乎 所 有 的 浏览 器 里 ， 用 Tab 键 移 
动 到 某 个 链接 然后 按 下 回 车 键 的 动作 也 会 触发 onclick 事件 。 
从 这 一 点 来 看 ， 把 它 命名 为 onactivate 也 许 更 恰如其分 。 


围绕 着 onclick 和 onkeypress 有 许多 让 人 困惑 的 东西 ， 它 们 
的 名 字 是 造成 这 些 困惑 的 主要 原因 。 有 些 可 用 性 指南 建议 我 们 
在 处 理 onclick 事件 时 也 一 定 要 处 理 onkeypress 事件 。 事 实 
上 ， 这 种 搭配 导致 的 问题 远 比 它们 解决 的 更 多 。 


最 好 不 要 使 用 onkeypress FAFARA KZ. onclick 事件 处 理 
函数 已 经 能 满足 需要 。 虽 然 它 叫 “onclick”， 但 它 对 键盘 访问 的 
支持 相当 完美 。 


下 面 是 最 终 完成 的 prepareGallery() flishowPic() 函数 的 
代码 清单 ; 
































function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery - document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a") ; 
for ( var i=@; i < links.length; i++) { 
links[i].onclick = function() { 
return showPic(this) ? false : true; 


} 


} 
I 
function showPic(whichpic) { 
if (!document.getElementById("placeholder")) return false; 
var source - whichpic.getAttribute("href"); 
var placeholder - document.getElementById("placeholder"); 
if (placeholder.nodeName !- "IMG") return false; 
placeholder.setAttribute("src",source); 
if (document.getElementById("description")) { 
var text = whichpic.getAttribute("title") ? whichpic.getAttri 
var description - document.getElementById("description"); 
if (description.firstChild.nodeType == 3) ( 
description.firstChild.nodeValue = text; 


} 


} 


return true; 





注意 ”可 以 在 Friends of ED 网 站 
(http://www.friendsofed.com ) 上 找到 本 书 的 页 面 来 下 载 
这 两 个 函数 的 最 终 完 整 版 本 。 


6.7 把 JavaScript 与 CSS 结 合 起 来 





把 JavaScript 代 码 从 HTML 文 档 里 分 离 出 去 还 带 来 男 一 个 好 处 。 
在 把 内 和 伦 型 事件 处 理 函 数 移出 标记 文档 时 ， 我 在 文档 里 为 
JavaScript 代 人 码 留 下 了 一 个 “ 挂 钧 ”: 





<ul id="imagegallery"> 


这 个 挂钩 完全 可 以 用 在 CSS 样 式 表 里 。 


比如 说 ， 如 果 不 想 把 图 片 清单 显示 成 一 个 带 项 目 符号 的 列表 ， 
则 完全 可 以 利用 这 个 jmagegallery 写 出 一 条 如 下 所 示 的 CSS 
语句 : 





#imagegallery { 
list-style: none; 


} 





我 可 以 把 这 条 CSS 语 句 存 入 一 个 外 部 文件 ， 比 如 layout.css 
文件 ， 然 后 再 从 gallery .html 文件 的 <head> 部 分 引用 它 : 


<link rel="stylesheet" href="styles/layout.css" type="text/css" m 
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按 横向 显示 : 





#imagegallery li { 
display: inline; 


pO 


上 和 面 这 两 条 CSS 语 句 将 使 我 的 网 页 变 成 如 图 6-1 所 示 的 样子 。 
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图 6-1 
即使 把 图 斤 链 接 换 成 一 些 缩微 图 而 不 是 文字 ，CSS 也 依然 有 


AL: 


«ul id-"imagegallery"» 
«li» 
«a href="images/fireworks.jpg" title="A fireworks display"» 
«img src-"images/thumbnail fireworks.jpg" alt-"Fireworks" / 
«/a» 


</li> 
<li> 
«a href="images/coffee.jpg" title-"A cup of black coffee" > 
«img src-"images/thumbnail coffee.jpg" alt="Coffee" /» 





</a> 
</li> 
<li> 
«a href="images/rose. jpg" title-"A red, red rose"» 
«img src-"images/thumbnail rose.jpg" alt="Rose" /> 
«/a» 
</li> 
<li> 
<a href="images/bigben. jpg" title="The famous clock"> 
«img src-"images/thumbnail bigben.jpg" alt="Big Ben" /> 
«/a» 
</li> 
</ul> 





ee 图 片 链接 都 显示 为 缩 略 图 而 不 古 
文本 。 
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图 6-2 
下 面 是 layout .css 文件 的 完整 清单 : 


body { 


font-family: "Helvetica", "Arial", serif; 
color: #333; 

background-color: #ccc; 

margin: 1em 10%; 


} 
hi { 
color: #333; 
background-color: transparent; 
} 
a { 
color: #c60; 
background-color: transparent; 
font-weight: bold; 
text-decoration: none; 
} 
ul ( 
padding: 0; 
} 
li ( 
float: left; 
padding: 1em; 
list-style: none; 
} 
#imagegallery { 
list-style: none; 
} 
#imagegallery li { 
display: inline; 
} 
#imagegallery li a img { 
border: 0; 


} 





er ered ern 如 图 6- 
3 有 不 。 
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6.8 DOM Core 和 HTML-DOM 


至 此 ， 我 在 编写 JavaScript 代 码 时 只 用 到 了 以 下 几 个 DOM[ 方 
法 : 


e getElementById 

e getElementsByTagName 
e getAttribute 

e setAttribute 


这 些 方法 都 是 DOM Core 的 组 成 部 分 。 它 们 并 不 专属 于 
JavaScript， 支 持 DOM 的 任何 一 种 程序 设计 语言 都 可 以 使 用 它 
们 。 它 们 的 用 途 也 并 非 仅 限于 处 理 网 页 ， 它 们 可 以 用 来 处 理 用 
任何 一 种 标记 语言 (比如 XML) 编写 出 来 的 文档 。 

在 使 用 JavaScript 语 言 和 DOM 为 HTML 文 件 编 写 脚 本 时 ， 还 有 
许多 属性 可 供 选用 。 例 如 ， 我 已 经 使 用 了 一 个 属性 onclick , 
用 于 图 片 库 中 的 事件 管理 。 这 些 属性 属于 HTML-DOM， 它 们 
在 DOM Core 出 现 之 前 很 久 就 已 经 为 人 们 所 熟悉 了 。 


比如 说 ，HTML-DOM 提 供 了 一 个 forms 对 象 。 这 个 对 象 可 以 
把 下 面 这 样 的 语句 : 


document.getElementsByTagName("form") 


简化 为 : 


document .forms 


类 似 地 ，HTML-DOM 还 提供 了 许多 描述 各 种 HTML 元 素 的 属 
性 。 比 如 说 ，HTML-DOM 为 图 片 提 供 的 src 属性 可 以 把 下 面 








这 样 的 语句 : 


element. getAttribute("src") 





简化 为 : 


element.src 


这 些 方法 和 属性 可 以 相互 奉 换 。 同 样 的 操作 既 可 以 只 使 用 
DOM Core 来 实现 ， 也 可 以 使 用 HTML-DOM 来 实现 。 正 如 大 家 
看 到 的 那样 ，HTML-DOM 代 码 通 常会 更 短 ， 必 须 提醒 一 下 ， 
它们 只 能 用 来 处 理 Web 文 档 。 如 果 你 打算 用 DOM 处 理 其 他 类 
型 的 文档 ， 请 和 干 万 注意 这 一 点 。 


aes DOM 的 话 ， 就 可 以 把 showPic 写 得 简短 一 





下 面 这 条 语句 使 用 了 DOM Core 来 得 到 whichpic 元 素 的 href 
属性 并 赋 给 变量 source : 


var source = whichpic.getAttribute("href"); 





下 面 是 使 用 HTML-DOM 达 到 同样 目的 的 语句 : 


var source = whichpic.href; 





下 面 是 使 用 DOM Core 的 另 一 个 例子 ， 这 次 把 placeholder 元 
素 的 src 属性 设置 为 变量 source 的 值 : 


placeholder. setAttribute("src",source); 


下 面 是 使 用 HTML-DOM 达 到 同样 目的 的 语句 : 


placeholder.src = source; 


即使 你 决定 只 使 用 DOM Core 方 法 ， 也 应 该 了 解 HTML-DOM。 
在 阅读 别人 编写 的 脚本 时 难免 会 遇 到 各 种 HTML-DOM 记 号 ， 
你 至 少 应 该 知道 都 是 干什么 用 的 。 


在 本 书 的 绝 大 多 数 章 节 里 ， 我 只 使 用 DOM Core 来 编写 代码 。 
虽然 代码 会 因此 而 变 得 有 点 儿 宛 长 ， 但 我 认为 DOM Core 方 法 
更 容易 使 用 。 当 然 ， 你 不 必 和 我 一 样 ， 完 全 可 以 根据 个 人 喜好 
和 具体 情况 来 做 出 选择 。 我 会 尽 可 能 地 告诉 你 ， 在 哪些 地 方 可 
以 用 HTML-DOM 来 简化 代码 。 








6.9 小结 


在 本 章 里 ， 我 对 图 片 库 进行 了 多 项 优化 ， 我 的 HTML 标 记 变 得 
更 加 整齐 。 我 还 为 我 的 图 片 库 网 页 提供 了 一 个 基本 的 CSS。 当 
然 ， 最 重要 的 是 改进 了 JavaScript 代 码 。 下 面 是 我 在 本 章 完 成 的 
几 项 主要 工作 。 


e 尽量 让 我 的 JavaScript 代 码 不 再 依赖 于 那些 没有 保证 的 假 
设 ， 为 此 我 引入 了 许多 项 测试 和 检查 。 这 些 测试 和 检查 使 
我 的 JavaScript 代 码 能 够 平稳 退化 。 

。 没有 使 用 onkeypress 事件 处 理 函 数 ， 这 使 我 的 JavaScript 
代码 的 可 访问 性 得 到 了 保证 。 

e 最 重要 的 是 把 事件 处 理 函 数 从 标记 文档 分 离 到 了 一 个 外 部 
的 JavaScript 文 件 。 这 使 我 的 JavaScript 代 码 不 再 依赖 于 
HTML 文 档 的 内 容 和 结构 。 


图 6-4 是 图 片 库 在 经 过 本 章 的 种 种 优化 之 后 的 样子 。 
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图 6-4 
我 认为 ， 结 构 与 行为 的 分 离 程 度 越 大 越 好 。 


在 图 片 库 的 标记 文档 部 分 还 有 一 些 内 容 让 我 感到 不 大 满意。 比 
lilii, placeholder 和 description 元 素 是 单纯 为 了 
showPic 函数 而 存在 的 ， 但 不 文 持 或 森 用 了 JavaScript 功 能 的 
e a a XX BE 66.2 256 UJ A HR EE 
至 是 困扰 。 


理想 的 情况 是 ， 让 这 两 个 元 素 只 在 过 到 那些 支持 DOM 的 浏览 
器 时 才 出 现在 HTML 文 档 里 。 在 下 一 章 里 ， 你 将 会 看 到 如 何 利 
用 DOM 提 供 的 方法 和 属性 去 创建 HTML 元 素 ， 并 把 它们 插入 
HTML 文 档 的 。 


第 7 章 动态 创建 标记 


本 章 内 容 


e 传统 技术 : document.write 和 innerHTML 。 
e 深入 剖析 DOM 方 法 : createElement 
. createTextNode 、appendChild 和 
insertBefore 。 


此 前 见 过 的 绝 大 多 数 DOM 方 法 只 能 用 来 查找 元 

素 。getElementById 和 getElementsByTagName 都 可 以 方便 
快捷 地 找到 文档 中 的 某 个 或 某 些 特定 的 元 素 节 点 ， 这 些 元 素 随 
后 可 以 用 诸如 setAttribute 〈 改 变 某 个 属性 的 值 ) 和 
nodeValue 《改变 某 个 元 素 节点 所 包含 的 文本 ) 之 类 的 方法 和 
属性 来 处 理 。 我 的 图 片 库 就 是 这 样 实现 的 。showPic 函数 先 找 
出 id 属性 值 是 placeholder 和 description 的 两 个 元 素 ， 然 
后 刷新 它们 的 内 容 。placeholder 元 素 的 src 属性 是 

用 setAttribute 修改 的 ，description 元 素 所 包含 的 文本 是 
用 nodeValue 属性 修改 的 。 在 这 两 种 情况 里 ， 都 是 对 已 经 存在 
的 元 素 做 出 修改 。 


这 是 绝 大 多 数 JavaScript 函 数 的 工作 原理 。 网 页 的 结构 由 标记 负 
贡 创 建 ，JavaScript 函 数 只 用 来 改变 某 些 细节 而 不 改变 其 底层 结 
构 。JavaScript 也 可 以 用 来 改变 网 页 的 结构 和 内 容 。 本 章 中 ， 你 
将 学 习 一 些 DOM 方 法 ， 通 过 创建 新 元 系 和 修改 现 有 元 素来 改 
变 网 页 结构 。 





























7A 一 些 传统 方法 
在 学 习 利 用 DOM 方 法 在 Web 浏览 器 中 往 文 档 添 加 标记 时 ， 移 
回顾 两 个 过 去 使 用 的 技术 ， 即 document .write fllinnerHTML 
7.1.1 document .write 


document 对 象 的 write() 方法 可 以 方便 快捷 地 把 字符 串 插入 
到 文档 里 。 


请 把 以 下 标记 代码 保存 为 一 个 文件 ， 文 件 名 就 用 test.htm 好 





<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
</head> 
<body> 


<script> 
document.write("«p»This is inserted.</p>"); 
</script> 
</body> 
</html> 





如 果 把 test.html 文件 加 载 到 Web 浏 览 器 里 ， 你 将 看 到 内 容 
为 “This is inserted.” 的 文本 段落 ， 如 图 7-1 所 示 。 





This is inserted. 








图 7-1 


document.write 的 最 大 缺点 是 它 违 背 了 “行为 应 该 与 表现 分 
离 ” 的 原则 。 即 使 把 document .write 语句 挪 到 外 部 函数 里 ， 
也 还 是 需要 在 标记 的 <body> 部 分 使 用 <script> 标签 才能 调用 
那个 函数 。 


下 面 这 个 上 函数 以 一 个 字符 串 为 参数 ， 它 将 把 一 个 <p> 标签 、 字 
符 串 和 一 个 /py> 标签 拼接 在 一 起 。 拼 接 后 的 字符 串 被 保存 到 " 
este ， 然 后 用 document .write() 方法 写 出 来 : 











function insertParagraph(text) { 
var str = "<p>"; 
str += text; 
str += "</p>"; 


document .write(str); 


} 





可 以 把 这 个 函数 保存 在 外 部 文件 example.Jjs 里 。 为 了 调用 这 
个 函数 ， 必 须 在 标记 里 搬入 <script> 标签 : 


<!DOCTYPE html» 


<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<script src="example.js"> 
</script> 

</head> 

<body> 
<script> 

insertParagraph("This is inserted."); 

</script> 

</body> 

</html> 








像 上 面 这 样 把 JavaScript 和 HTML 代 码 混 杂 在 一 起 是 一 种 很 不 好 





的 做 法 。 这 样 的 标记 既 不 容易 阅读 和 编辑 ， 也 无 法 享受 到 把 行 
为 与 结构 分 离开 来 的 好 处 。 


这 样 的 文档 还 很 容易 导致 验证 错误 。 比 如 说 ， 在 第 一 个 例子 
Æ, <script> 标签 后 面 的 “<p> ”很 容易 被 误 认 为 是 <p> 标 

签 ， 而 在 《<script> 标签 的 后 面 打开 <p> 标签 是 非法 的 。 事 实 
上 ， 那 个 <<p>” 和 “</p> ”只 不 过 是 一 个 将 被 插入 文档 的 字符 串 
的 组 成 部 分 而 已 。 


还 有 ，MIME 类 型 application/xhtml+xml 
与 document .write 不 兼容 ， 浏 览 器 在 呈现 这 种 XHTML 文 档 
时 根本 不 会 执行 document .write 方法 。 


从 某 种 意义 上 讲 ， 使 用 document.write 方法 有 点 儿 像 使 
用 <font> 标签 去 设 定 字 体 和 颜色 。 虽 然 这 两 种 技术 在 HIML 
文档 里 都 工作 得 不 错 ， 但 它们 都 不 够 优雅 。 


把 结构 、 行 为 和 样式 分 开 永 远 都 是 一 个 好 主意 。 只 要 有 可 能 ， 
就 应 该 用 外 部 CSS 文 件 代 蔡 <font> 标签 去 设 定 和 管理 网 页 的 
样式 信息 ， 最 好 用 外 部 JavaScript 文 件 去 控制 网 页 的 行为 。 应 该 
避免 在 <body> 部 分 乱用 <script> 标签 ， 避 免 使 

用 document .write 方法 。 











7.1.2. innerHTML 属性 


现 如 今 的 浏览 器 几 于 都 支持 属性 innerHTML ， 这 个 属性 并 不 是 
W3C DOM 标 准 的 组 成 部 分 ， 但 现 已 经 包含 到 HTML5 规 范 中 。 
它 始 p DE 4 浏览 器 ， 并 从 那 时 起 逐渐 被 其 他 的 浏 
览 器 接受 


innerHTML 属性 可 以 用 来 读 、 写 某 给 定 元 素 里 的 HTML 内 容 。 
要 了 解 它 如 何 工作 ， 请 把 下 面 这 段 代 码 插入 test.html 文档 的 
<body> 部 分 : 


<div id-"testdiv"» 
<p>This is <em>my</em> content.</p> 
</div> 








用 DOM 的 眼睛 看 testdiv 内 的 标记 ， 是 如 图 7-2 所 示 的 结构 。 


元 素 市 点 


div 
节点 Pee 
元 素 节 点 
id = 
p 
re Hal, S T" 


"testdiv" 
This is em content. 


div 元 素 的 id 是 testdiv 。 它 包含 一 个 元 素 节 点 (pA) . 
这 个 p 元 素 义 有 一 些 子 节点 。 其 中 有 两 个 文本 节点 ， 值 分 别 
是 This is 和 content 。 还 有 一 个 元 素 节 点 Cem TR) » em 
元 素 本 身 包 含 一 个 文本 节点 ， 这 个 文本 节点 的 值 是 my 。 


DOM 提 供 了 关于 这 个 标记 的 非常 详细 的 一 幅 图 男 。 使 用 DOM 
提供 的 方法 和 属性 可 以 对 任何 一 个 节点 进行 单独 的 访问 。 这 个 
标记 从 innerHTML 属性 的 角度 来 看 则 简单 得 多 ， 如 图 7-3 所 
示 ， 就 innerHTML 属性 看 来 ，id Ntestdiv 的 标记 里 面 只 有 
一 个 值 为 <p>This is «em»my«/em» content.</p> 的 
HTML 字 符 串 。 





<p>This is <em>my</em> content.</p> 


HTML 
图 7-3 
用 下 面 这 个 新 函数 更 新 example.Jjs 文件 。 


window.onload = function() { 
var testdiv = document.getElementById("testdiv"); 
alert(testdiv.innerHTML) ; 


} 





然后 在 web 浏览 器 里 刷新 test .html 页 面 ，div 元 素 〈 它 的 id 


属性 值 等 于 testdiv ) 的 innerHTML 属性 值 将 显示 在 一 
个 alert 对 话 框 里 ， 如 图 7-4 所 示 。 





Testing 





TEE 
á = 
4 <p>This is <em>my</em> content.</p> 
This is my conte — v , 


€—o—) 





图 7-4 


很 明显 ，innerHTML BEXATAR. RRR, GNU 
使 用 DOM 方 法 和 属性 。 标 准 化 的 DOM 像 手术 刀 一 样 精 
细 ，innerHTML 属性 就 像 一 把 大 锤 那 样 粗 放 。 


大 锤 有 大 锤 的 用 武之 地 。 在 你 需要 把 一 大 段 HTML 内 容 插 入 网 
页 时 ，innerHTML 属性 更 适用 。 它 既 支 持 读 取 ， 又 支持 写 入 ， 
你 不 仅 可 以 用 它 来 读 出 元 素 的 HTML 内容 ， 还 可 以 用 它 把 
HTML FJ AS ATR © 


编辑 test .html 文件 ， 让 id 属性 值 等 于 testdiv 的 元 素 变 成 


Z2y> 


-L 





«div id="testdiv"> 
«/div» 





把 下 面 这 段 JavaScript 代 码 放 入 example.js 文件 ， 就 可 以 把 一 
段 HTML 内 容 插 入 这 个 <div> 标签: 





window.onload = function() { 
var testdiv = document.getElementById("testdiv"); 
testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>"; 


} 


[L CSR 


在 Web 浏 览 器 里 刷新 test.html 文件 ， 你 就 可 以 看 到 如 图 7-5 
所 示 的 结果 。 


TARA Testing = 
Boge  —oco 


I inserted this content. 











图 7-5 


利用 这 个 技术 无 法 区 分 “插入 一 段 HTML 内 容 * 和 “替换 一 段 
HTML", testdiv 元 素 里 有 没有 HTML 内容 无 关 紧 要 : 
一 旦 你 使 用 了 innerHTML 属性 ， 它 的 全 部 内 容 都 将 被 蔡 换 。 


在 test.html 文件 里 ， 把 id 属性 值 等 于 testdiv 的 元 素 的 内 
容 修改 回 它 原来 的 样子 : 











<div id="testdiv"> 
<p>This is <em>my</em> content.</p> 
</div> 





example.js 文件 保持 不 变 。 如 果 你 在 Web 浏览 器 里 刷新 
test.html 文件 ， 结 果 将 和 刚才 一 样 。 包 含 在 testdiv 元 素 
里 HIML 内 容 被 innerHTML 属性 完全 改变 了 ， 原 来 的 HIML 内 
容 未 留 下 任何 痕迹 。 

在 需要 把 一 大 段 HTML 内 容 插入 一 份 文档 时 ，innerHTML 属性 
可 以 让 你 又 快 又 简单 地 完成 这 一 任务 。 不 过 ，innerHTML 属性 
不 会 返回 任何 对 刚 插入 的 内 容 的 引用 。 如 果 想 对 刚 插入 的 内 容 
进行 处 理 ， 则 需要 使 用 DOM 提 供 的 那些 精确 的 方法 和 属性 。 


innerHTML 属性 要 比 document .write() 方法 更 值得 推荐 。 





使 用 innerHTML 属性 ， 你 就 可 以 把 JavaScript 代 人 码 从 标记 中 分 
离 出 来 。 用 不 着 再 在 标记 的 <body> 部 分 插入 <script> 标签 。 


类 似 于 document .write 方法 ，innerHTML 属性 也 是 HTML 专 
有 属性 ， 不 能 用 于 任何 其 他 标记 语言 文档 。 浏 览 器 在 呈现 正宗 
的 XHTML 文 档 ( 即 MIME 类 型 是 application/xhtml+xml 的 
XHTML 文档 ) 时 会 直接 忽略 掉 innerHTML 属性 。 


在 任何 时 候 ， 标 准 的 DOM 都 可 以 用 来 苦 代 innerHTML . ii 
这 往往 需要 多 编写 一 些 代码 才能 获得 同样 的 效果 ， 但 DOM 同 
时 也 提供 了 更 高 的 精确 性 和 更 强大 的 功能 。 
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getElementById 和 getElementsByTagName 等 方法 可 以 把 关 
于 文档 结构 和 内 容 的 信息 检索 出 来 ， 它 们 非常 有 用 。 


DOM 是 文档 的 表示 。DOM 所 包含 的 信息 与 文档 里 的 信息 一 一 
对 应 。 你 只 要 学 会 问 正确 的 问题 (使 用 正确 的 方法 ) ， 就 可 以 
获取 DOM 节 点 树 上 任何 一 个 节点 的 细节 。 


DOM 是 一 条 双 同 车 道 。 不 仅 可 以 获取 文档 的 内 容 ， ee 
新 文档 的 内 容 。 如 果 你 改变 了 DOM 节 点 树 ， 文 档 在 浏览 器 

的 呈现 效果 就 会 发 生变 化 。 你 EE a Ji x 
的 神奇 之 处 了 。 用 这 个 方法 可 以 改变 DOM 节 点 树 上 的 某 个 属 
性 节点 ， 相 关 文 档 在 浏览 器 里 的 呈现 就 会 发 生 相 应 的 变化 。 不 
过 ，setAttribute 方法 并 未 改变 文档 的 物理 内 容 ， 如 果 用 文 
本 编辑 器 而 不 是 浏览 器 去 打开 这 个 文档 ， 我 们 将 看 不 到 任何 变 
化 。 只 有 在 用 浏览 器 打开 那 份 文档 时 才能 看 到 文档 呈现 效果 的 
变化 。 这 是 因为 浏览 器 实际 显示 的 是 那 棵 DOM 节 点 树 。 在 浏 
览 器 看 来 ， DOM 节 点 树 才 是 文档 。 


一 旦 明白 了 这 个 道理 ， 以 动态 方式 实时 创建 标记 就 不 那么 难以 
理解 了 。 你 并 不 是 在 创建 标记 ， 而 是 在 改变 DOM 节 点 树 。 做 
到 这 一 点 的 关键 是 一 定 要 从 DOM 的 角度 去 思考 问题 。 


在 DOM 看 来 ， 一 个 文档 吏 是 一 柠 节 点 树 。 如 果 你 想 在 节 氮 树 
上 添加 内 容 ， 束 必须 插入 新 的 节点 。 如 果 你 想 添 加 一 些 标 记 到 
文档 ， 束 必须 插入 元 素 节 点 。 




















7.2.1 createElement 方法 


编辑 test html XF, ikid && T testdiv 的 那个 <div> 标签 
的 内 容 变 成 空白 : 





«div id="testdiv"> 
</div> 


我 想 把 一 段 文本 插入 testdiv 元 素 。 用 DOM 的 语 言 来 说 ， wt 
是 想 添 加 一 个 p 元 素 节点 ， 并 把 这 个 节点 作为 div 元 素 节点 的 
= 人 
个 id 属性 节点 ， 值 是 testdiv ) 。 

这 项 任务 需要 分 两 个 步骤 完成 : 

(1) 创建 一 个 新 的 元 素 ; 

(2) 把 这 个 新 元 素 插入 节点 树 。 


第 一 个 步骤 要 用 DOM 方 法 createElement 来 完成 。 下 面 是 使 
用 这 个 方法 的 语法 : 








document. createElement (nodeName ) 





下 面 这 条 语句 将 创建 一 个 p 768: 


document.createElement("p"); 











这 个 方法 本 里 并 不 能 影响 页 面 表现 ， 还 需要 把 这 个 新 创建 出 来 





的 元 素 插 入 到 文档 中 去 。 为 此 ， 你 需要 有 个 东西 来 引用 这 个 新 
创建 出 来 的 节点 。 不 论 何 时 何 地 ， 只 要 你 使 用 了 
createElement 方法 ， 就 应 该 把 新 创建 出 来 的 元 素 赋 给 一 个 
变量 就 总 是 个 好 主意 : 


var para = document.createElement("p"); 





变量 para 现在 包含 着 一 个 指 问 刚 创建 出 来 的 那个 p 7638 51 


用 。 现 在 ， 虽 然 这 个 新 创建 出 来 的 p 但 它 还 
不 是 任何 一 柠 DOM 节 点 树 的 组 成 部 分 ， 它 只 是 游荡 在 
JavaScript 世 界 里 的 一 个 扳 儿 。 它 这 种 情 况 称 为 文档 碎片 
(document fragment)， 还 无 法 显示 在 浏览 器 的 窗口 画面 里 。 不 
过 ， 它 已 经 像 任 何其 他 的 节点 那样 有 了 自己 的 DOM 属 性 。 


这 个 无 家 可 归 的 p 元 素 现 在 已 经 有 一 个 nodeType 和 一 

个 nodeName 值 ， 如 图 7-6 所 示 。 这 一 事实 可 以 用 下 面 这 段 代 码 
来 验证 (把 以 下 代码 放 入 example.js 文件 并 在 浏览 器 里 刷新 
test.html Xf). 





window.onload = function() { 
var para = document.createElement("p"); 
var info - "nodeName: "; 
info+= para.nodeName; 
info+= " nodeType: "; 


info+= para.nodeType; 
alert(info); 





nodeName: P nodeType: 1 





Co 











图 7-6 
新 节点 确实 已 经 存在 ， 它 有 一 个 取 值 为 P 的 nodeName 
它 还 有 一 个 取 值 为 1 的 nodeType 属性 ， 而 这 意味 着 它 M ETE 





素 节 点 。 不 过 ， 这 个 节点 现在 还 未 被 连 it 
节点 树 上 。 


7.2.2 appendChild 方法 


EIBERT RATA TS SCSI i a) FINE, iE 
它 成 为 这 个 文档 某 个 现 有 节操 的 一 个 子 节 点 。 


具体 到 这 个 例子 ， 是 要 把 一 段 新 文 本 插入 到 test.html 文档 中 
id 是 testdiv 的 元 素 节 点 。 换 句 话说 ， 我 想 让 新 创建 的 p 元 
素 成 为 testdiyv 元 素 的 一 个 子 节点 。 你 可 以 用 appendChild 
方法 来 完成 这 一 任务 。 下 面 是 appendChild 方法 的 语法 : 











parent.appendChild(child) 





具体 到 test.html 文档 这 个 例子 ， 上 面 这 个 语法 中 的 child sk 
是 刚才 用 createElement 方法 创建 出 来 的 ，parent 就 是 id 
是 testdiv 的 元 素 节 点 。 我 需要 用 一 个 DOM 方 法 得 

到 “testdiv” 节 点 ， 最 简单 的 办 法 是 使 用 getElementById 7; 
x. 


像 往 第 一 样 ， 你 把 这 个 元 系 赋 给 一 个 变量 ， 这 可 以 让 你 的 代码 
简明 易 读 : 


var testdiv = document. getElementById("testdiv"); 





变量 testdiv 现在 包含 着 一 个 指 癌 那 个 id 等 于 testdiv 的 元 
素 的 引用 。 


在 上 一 小 节 我 创建 了 一 个 para 变量 ， 它 包含 一 个 指向 刚 创建 
FAI pz RISUS: 


var para - document.createElement("p"); 





有 了 这 些 ， 就 可 以 像 下 面 这 样 用 appendChild 方法 把 变量 
para 插入 变量 testdiv J: 


testdiv.appendChild(para) ; 





新 创建 的 p 元 素 现在 成 为 了 testdiv 元 素 的 一 个 子 节点 。 它 不 
再 是 JavaScript 世 界 里 的 一 个 孤儿 ， 它 已 经 被 插入 到 test.html 
文档 的 节点 树 里 了 。 


在 使 用 appendChild 方法 时 ， 不 必 非 得 使 用 一 些 变量 来 引用 
事实 上 ， 完 全 可 以 把 上 面 这 条 语句 写成 下 面 
这 样 : 


document. getElementById("testdiv").appendChild( document.createEl 





可 以 看 到 ， 上 面 这 样 的 代码 很 难 阅读 和 理解 。 像 下 面 这 样 多 写 
儿 行 ， 从 长 远 来 看 是 值得 的 : 





var para = document.createElement("p"); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendChild(para); 





7.23 createTextNode 方法 


你 现在 已 经 创建 出 了 一 个 元 素 节 点 并 把 它 插 入 了 文档 的 节点 
Bj, 这 站 节操 是 一 个 空白 的 广元 兹 。 你 想 把 一 些 文本 放 和 这 
个 p 元 系 ， 但 createElement 方法 帮 不 上 忙 ， 它 只 能 创建 元 素 
节点 。 你 需要 创建 一 个 文本 节点 ， 你 可 以 用 createTextNode 
方法 来 实现 它 。 


注意 ”和 干 万 不 要 被 这 些 方法 的 名 字 弄 糊 深 。 如 果 这 些 方 





法 叫做 createElementNode fllcreateTextNode ， 或 者 
叫做 createElement 和 createText ， 都 会 非常 清楚 。 遗 
憾 的 是 ， 它 们 的 名 字 叫 做 createElement 和 
createTextNode . 


createTextNode 的 语法 与 createElement 很 相似 : 


document. createTextNode(text) 





下 面 这 条 语句 将 创建 出 一 个 内 容 为 “Hello world” 的 文本 节点 : 


document.createTextNode("Hello world"); 





和 刚才 一 样 ， 把 这 个 新 创建 的 节点 也 赋 给 一 个 变量 : 


var txt = document.createTextNode("Hello world"); 





变量 txt BUE BAS TR In Sr OEY IB PS CAST A SIF. xx 8 
点 现在 也 是 JavaScript 世 界 里 的 一 个 孤儿 ， 因 为 它 还 未 被 插入 任 


何 一 个 文档 的 市 点 树 。 


可 以 用 appendChild 方法 把 这 个 文本 节点 插入 为 某 个 现 有 元 
素 的 子 节 点 。 我 将 把 这 个 文本 节点 插入 到 我 在 上 一 小 节 创 建 的 
p 元 素 。 因 为 在 上 一 小 节 里 我 已 经 把 那个 p 元 素 存 入 了 变量 
para ， 现 在 又 把 新 创建 的 文本 节点 存 入 了 变量 txt ， 所 以 现 
在 可 以 用 下 面 这 条 语句 来 达到 我 的 目的 : 














para.appendChild(txt); 








内 容 为 “Hello world” 的 文本 节点 就 成 为 那个 p 元 素 的 一 个 子 节 
点 了 o 


现在 ， 试 着 把 下 面 这 段 代 码 写 入 example .js 文件 : 


window.onload = function() { 
var para = document.createElement("p"); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendChild(para) ; 
var txt = document.createTextNode("Hello world"); 


para.appendChild(txt); 





然后 在 浏览 器 里 重新 加 载 test .html 文件 ， 你 会 从 浏览 器 窗口 
里 看 到 文本 “Hello world”， 如 图 7-7 所 示 。 


€) €) Testing C 





Hello world 





图 7-7 
这 个 例子 是 按照 以 下 顺序 来 创建 和 插入 节点 的 : 
(1) 创建 一 个 p 元 素 节 点 。 
(2) 把 这 个 p 元 素 节点 追加 到 test.html 文档 中 的 一 个 元 素 节 





点 上 。 
(3) 创建 一 个 文本 市 反 。 
(4) 把 这 个 文本 布点 退 加 到 刚才 创建 的 那个 p 76378 RAE 


appendChild 方法 还 可 以 用 来 连接 那些 尚未 成 为 文档 树 一 部 
分 的 节点 。 也 就 是 说 ， 以 下 步骤 顺序 同样 可 以 达到 目的 。 


(1) 创建 一 个 p 763 Mo 

(2) 创建 一 个 文本 市 反 。 

(3) 把 这 个 文本 市 点 退 加 到 第 1 步 创 建 的 p TUR S3 Ee 
ae 元 素 节点 追加 到 test.html 文档 中 的 一 个 元 素 节 











下 面 是 按照 新 步骤 编写 出 来 的 函数 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt = document.createTextNode("Hello world"); 
para.appendChild(txt); 
var testdiv - document.getElementById("testdiv"); 


testdiv.appendChild(para); 





最 终 的 结果 是 一 样 的。 把 上 面 这 些 代码 写 入 example.js 文 
件 ， 并 在 浏览 器 里 重新 加 载 test .html 文件 。 你 会 看 到 文 
本 “Hello world”, Lf RE. 


7.2.4 一 个 更 复杂 的 组 合 


刚才 介绍 innerHTML 属性 时 ， 我 使 用 了 如 下 所 示 的 HTML 内 
容 : 


<p>This is <em>my</em> content.</p> 








与 创建 一 个 包含 着 一 些 文本 的 p 元 素 相 比 ， 这 个 步骤 要 复杂 不 
ae Sean ere 文档 ， 先 把 它 转 换 为 一 棵 
节点 树 。 


This is em content. 


图 7-8 


如 图 7-8 所 示 ， 这 些 HTML 内容 对 应 着 一 个 p 元 素 节点 ， 它 本 身 
又 包含 着 以 下 子 节 点 。 
e 一 个 文本 节点 ， 其 内 容 是 “This is” 
e 一 个 元 素 节 点 “em”， 这 个 元 素 节 点 本 映 还 包含 着 一 个 文 
本 节点 ， 其 内 容 是 “my” 
e 一 个 文本 节点 ， 其 内 容 是 “content.” 


把 需要 创建 哪些 市 点 的 问题 弄 清 楚 后 ， 我 们 能 制定 出 一 个 受 痰 
的 行动 计划 。 


(1) 创建 一 个 p 元 素 节 点 并 把 它 赋 给 变量 para 。 
(2) 创建 一 个 文本 节点 并 把 它 赋 给 变量 txt1 。 














(3) 把 txt1 追加 到 para E. 

(4) 创建 一 个 em 元 素 节 点 并 把 它 赋 给 变量 emphasis 。 

(5) 创建 一 个 文本 市 点 并 把 它 赋 值 给 变量 txt2 。 

(6) 把 txt2 追加 到 emphasis FL. 

(7) 把 emphasis 追加 到 para 上 。 

(8) 创建 一 个 文本 布点 并 把 它 赋 值 给 变量 txt3 。 

(9) 把 txt3 追加 到 para E. 

(10) 把 para 追加 到 test.html 文档 中 的 testdiv 元 素 上 。 
下 面 是 根据 上 述 步骤 编写 出 来 的 JavaScript 代 码 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt1 = document.createTextNode("This is "); 
para.appendChild(txt1); 
var emphasis - document.createElement("em"); 
var txt2 - document.createTextNode("my"); 
emphasis.appendChild(txt2); 
para.appendChild(emphasis); 
var txt3 - document.createTextNode(" content."); 
para.appendChild(txt3); 
var testdiv - document.getElementById("testdiv"); 
testdiv.appendChild(para); 





把 上 面 这 些 代码 写 入 example.js 文件 ， 然 后 在 浏览 器 里 重新 
加 载 test .html 文档 。 


如 果 你 愿意 ， 可 以 采用 一 种 不 同 的 方案 。 可 以 先 把 所 有 的 节点 
都 创建 出 来 ， 然 后 再 把 它们 连接 在 一 起 。 下 面 是 按照 这 一 思路 
制定 出 来 的 行动 计划 。 








(1) 创建 一 个 p 元 素 节 点 并 把 它 赋值 给 变量 para 。 

(2) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt1 。 

(3) 创建 一 个 em 元 素 节 点 并 把 它 赋 值 给 变量 emphasis 。 
(4) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt2 。 

(5) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt3 。 

(6) 把 txt1 追加 到 para E. 

(7) 把 txt2 退 加 到 emphasis E. 

(8) 把 emphasis 追加 到 para E- 

(9) 把 txt3 追加 到 para E. 

(10) 把 para 追加 到 test.html 文档 中 的 testdiv 元 素 上 。 
下 面 是 根据 上 述 步 又 编写 出 来 的 JavaScript 代 码 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt1 = document.createTextNode("This is "); 
var emphasis - document.createElement("em"); 
var txt2 - document.createTextNode("my"); 
var txt3 - document.createTextNode(" content."); 
para.appendChild(txt1); 
emphasis.appendChild(txt2); 


para.appendChild(emphasis); 
para.appendChild(txt3); 

var testdiv - document.getElementById("testdiv"); 
testdiv.appendChild(para); 





如 果 把 上 面 这 些 代 码 写 入 example.js 文件 ， 然 后 在 浏览 器 里 
重新 加 载 test html 文档 ， 将 看 到 与 前 面 一 模 一 样 的 结果 。 





可 以 看 到 ， 把 新 节点 插入 某 个 文档 的 节点 树 的 办 法 并 非 只 有 一 
种 。 即 使 决定 永远 也 不 使 用 document .write 方法 

或 innerHTML 属性 ， 在 使 用 DOM 方 法 去 创建 和 插入 新 节点 时 
你 也 可 以 灵活 地 做 出 多 种 选择 。 


7.3 重 回 图 片 库 


现在 ， 我 将 问 你 展示 一 个 动态 创建 HTML 内 容 的 实用 采 例 。 在 
上 一 章 里 ， 我 们 对 图 片 库 脚 本 做 了 许多 改进 。 我 们 做 到 了 让 
JavaScript 代 人 码 与 HTML 分 离 ， 并 针对 各 种 情况 做 到 了 平稳 退 
化 ， 我 们 还 做 了 一 些 访问 性 有 关 的 改进 。 


不 过 ， 还 有 一 些 内 容 让 我 感到 不 太 满 意 。 看 一 
下 gallery.html 文件 中 的 标记 : 








«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /» 
«title»Image Gallery«/title» 
<link rel="stylesheet" href="styles/layout.css" media="screen" 
</head> 


<body> 
<h1>Snapshots</h1> 
«ul id-"imagegallery"» 
«li» 


«a href-z"images/fireworks.jpg" title-"A fireworks display"» 
«img src-"images/thumbnail fireworks.jpg" alt-"Fireworks" 
«/a» 
</li> 
<li> 
«a href="images/coffee.jpg" title="A cup of black coffee" > 
«img src-"images/thumbnail coffee.jpg" alt="Coffee" /> 
«/a» 
</li> 
<li> 
<a href="images/rose.jpg" title="A red, red rose"> 
<img src="images/thumbnail_rose.jpg" alt="Rose" /> 
</a> 
</li> 
<li> 
«a href="images/bigben.jpg" title="The famous clock"> 
«img src-"images/thumbnail bigben.jpg" alt="Big Ben" /» 
«/a» 
</li> 
</ul> 
<img id="placeholder" src="images/placeholder.gif" alt="my imag 
<p id="description">Choose an image.</p> 


«script src="scripts/showPic.js"></script> 
</body> 
</html> 





这 个 HTML 文 件 中 有 一 个 图 片 和 一 段 文字 仅仅 是 为 showPic H 
本 服务 的 。 硅 能 把 结构 和 行为 彻 原 分 开 那 最 好 不 过 了 。 既 然 这 





些 元 素 的 存在 只 是 为 了 让 DOM 方 法 处 理 它们 ， 那 么 用 DOM 方 
法 来 创建 它们 才 是 最 合适 的 选择 。 


第 一 步 非常 简单 :把 这 些 元 素 从 gallery .html 文档 里 删 挥 。 
接 下 来 ， 我 们 编写 一 些 JavaScript 代 码 把 它们 动态 地 创建 出 来 。 


我 们 先 编写 一 个 函数 preparePlaceholder 并 把 它 放 进 
showPic.js 文件 ， 然 后 在 文档 加 载 时 调用 这 个 函数 。 下 面 是 
这 个 函数 要 完成 的 任务 。 

(1) 创建 一 个 img 元 素 节 点 。 

(2) 设置 这 个 节点 的 id 属性 。 

(3) 设置 这 个 节点 的 src 属性 。 

(4) 设置 这 个 节点 的 alt 属性 。 

(5) 创建 一 个 p NAT M o 

(6) 设置 这 个 布点 的 id 属性 。 

(7) 创建 一 个 文本 节点 。 

(8) 把 这 个 文本 节点 退 加 到 p 元 素 上 。 

(9) 把 p 元 素 和 img 元 系 插 入 到 gallery .html 文档 。 

创建 这 些 元 素 和 设置 各 有 关 属 性 的 工作 比较 明确 。 我 们 在 这 里 


组 合 使 用 了 createElement() 、createTextNode() 和 
setAttribute() 方法 : 











var placeholder = document.createElement ("img") ; 
placeholder. setAttribute("id", "placeholder" ) ; 
placeholder. setAttribute("src","images/placeholder. gif") ; 
placeholder.setAttribute("alt","my image gallery"); 

var description - document.createElement("p"); 


description.setAttribute("id","description"); 
var desctext - document.createTextNode("Choose an image"); 





接 下 来 ， 我 们 用 appendChild() 方法 把 新 创建 的 文本 节点 插 
Ap TUR: 


description. appendChild(desctext) ; 
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(<ul> ... </ul>) 刚好 是 文档 中 的 最 后 一 个 元 素 ， 所 以 如 
果 把 placeholder 和 description 元 素 追 加 到 body 元 素 节点 
上 ， 它 们 就 会 出 现在 图 片 清单 的 后 面 。 我 们 可 以 通过 标签 
e RCM 标签 (作为 第 一 个 也 是 唯一 一 个 body 元 素 

g 引 用) 。 


document.getElementsByTagName("body")[0].appendChild(placeholder) 
document.getElementsByTagName("body")[0].appendChild(description) 





当然 ， 也 可 以 使 用 HTML-DOM 提 供 的 属性 body : 


document .body .appendChild(placeholder); 
document .body.appendChild(description); 





这 两 组 语句 都 会 把 placeholder flidescription 元 素 插入 到 





位 于 文档 末尾 的 </bodyy> 标签 之 前 。 


以 上 代码 工作 得 很 好 ， 但 这 一 切 都 依赖 于 一 个 细节 : 图 片 清单 
刚好 是 <body> 部 分 的 最 后 一 个 元 系 。 如 果 在 这 个 图 片 清 单 的 
后 面 还 有 一 些 其 他 的 内 容 该 怎么 办 ? 我 们 的 真实 想法 是 ， 让 新 
创建 的 元 又 紧 跟 在 图 片 清单 的 后 面 ， 而 不 管 这 个 清单 出 现在 文 
档 中 的 什么 地 方 。 


7.3.1 在 已 有 元 又 前 插入 一 个 新 元 素 

DOM 提 供 了 名 为 insertBefore() 方法 ， 这 个 方法 将 把 一 个 
新 元 素 插 入 到 一 个 现 有 元 素 的 前 面 。 在 调用 此 方法 时 ， 你 必须 
告诉 它 三 件 事 。 

(1) 新 元 素 : 你 想 插 入 的 元 素 〈 newELement ) 。 


(2) 目标 元 素 : 你 想 把 这 个 新 元 素 插 入 到 哪个 元 素 〈 
targetELement ) 之 前 。 

















(3) 父 元 素 : 目标 元 素 的 父 元 素 C parentELement ) 。 
下 面 是 这 个 方法 的 调用 语法 : 


parentElement.insertBefore(newElement,targetElement) 





我 们 不 必 搞 清楚 父 元 素 到 底 是 哪个 ， 因 为 targetElement 元 

素 的 parentNode 属性 值 就 是 它 。 在 DOM 里 ， 元 素 节点 的 父 元 
素 必须 是 另 一 个 元 素 节点 (属性 节点 和 文本 节点 的 子 元 素 不 允 
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比如 说 ， 下 面 这 条 语句 可 以 把 placeholder 和 description 
元 素 搬入 到 图 片 清单 的 前 面 〈 还 记得 吗 ， 图 片 清单 的 id 


是 imagegallery ) : 














var gallery = document. getElementById("imagegallery") ; 
gallery.parentNode. insertBefore(placeholder, gallery); 


此 时 ， 变 量 gallery 的 parentNode 属性 值 是 body 元 素 ， 所 
以 placeholder 元 素 将 被 插入 为 body 元 素 的 新 子 元 素 ， 它 被 
插入 到 它 的 兄弟 元 素 gallery 的 前 面 。 


还 可 以 把 description 元 素 也 插入 到 gallery 元 素 之 前 ， 成 
为 它 的 一 个 兄弟 元 素 : 


gallery.parentNode. insertBefore(description, gallery); 


在 gallery 清单 的 前 面 插入 placeholder 图 片 和 
description 文本 段 的 效果 如 图 7-9 所 示 。 
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这 种 效果 其 实 也 不 错 ， 但 我 们 刚才 说 的 是 把 新 创建 的 元 素 插入 





到 图 片 清单 的 后 面 ， 而 不 是 前 面 。 
7.3.2 ”在 现 有 元 素 后 插入 一 个 新 元 素 


你 可 能 会 想 ， 既然 有 一 个 insertBefore 方法 ， 是 不 是 也 有 一 
个 相应 的 insertAfter() 方法 。 很 可 惜 ，DOM 没 有 提供 这 个 
Jk. 

. 44'S insertAfter 函数 

虽然 DOM 本 身 没 有 提供 insertAfter 方法 ， 但 它 确实 提 

供 了 把 一 个 节点 插入 到 男 一 个 节点 之 后 所 需 的 所 有 工具 。 


我 们 完全 可 以 利用 已 有 的 DOM 方 法 和 属性 编写 一 
个 insertAfter MŽ: 





function insertAfter(newElement,targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastChild == targetElement) { 
parent.appendChild(newElement) ; 
} else { 


parent.insertBefore(newElement, targetElement.nextSibling 
j 
} 





个 函数 用 到 了 以 下 DOM 方 法 和 属性 : 


e parentNode 属性 
lastChild 属性 
appendChild 方法 
insertBefore 方法 
nextSibling 属性 


下 面 ， 请 看 看 这 个 函数 是 如 何 一 步 一 步 地 完成 工作 的 。 
(1) Ft, 这 个 函数 有 两 个 参数 : 一 个 是 将 被 插入 的 新 元 


素 ， 男 一 个 是 目标 元 素 。 这 两 个 参数 通过 变量 
newElement 和 targetElement 被 传递 到 这 个 函数 : 


function insertAfter(newElement,targetElement) 





(2) 把 目标 元 素 的 parentNode 属性 值 保存 到 变量 parent 
E, 


var parent = targetElement.parentNode 











(3) 接 下 来 ， 检 查 目 标 元 素 是 不 是 parent 的 最 后 一 个 子 元 
素 ， 即 比较 parent 元 素 的 lastchild 属性 值 与 目标 元 素 
是 否 存在 “等 于 ”关系 : 


if (parent.lastChild == targetElement) 





(4) 如 果 是 ， 就 用 appendChild 方法 把 新 元 素 追 加 
ye rent 元 素 上 ， 这 样 新 元 素 就 恰好 被 插入 到 目标 元 素 
e ay 


parent.appendChild(newElement) 











(5) MR Aes MIP JUR TELA BU H hc A H tc HI] 

下 一 个 兄弟 元 素 之 间 。 目 标 元 素 的 下 一 个 兄弟 元 素 即 目标 
元 素 的 nextSibling 属性 。 用 insertBefore 方法 把 新 元 
素 插 入 到 目标 元 素 的 下 一 个 兄弟 元 素 之 前 : 











parent.insertBefore(newElement, targetElement.nextSibling) 





li. 


表面 上 看 ， 这 是 一 个 相当 复杂 的 函数 ， 但 只 要 把 它 分 成 几 
个 小 部 分 来 理解 ， 就 很 容易 搞 清 楚 。 即 使 你 现在 还 不 能 完 
全 明白 也 不 要 紧 。 等 你 对 insertAfter 函数 所 用 到 的 
DOM 方 法 和 属性 更 加 熟悉 时 ， 你 目 然 就 能 完全 理解 它 。 


类 似 于 第 6 章 出 现 的 addLoadEvent 函数 ，insertAfter 
函数 也 非常 实用 ， 应 该 把 它们 都 收录 到 你 的 脚本 里 。 


使 用 insertAfter 函数 





我 们 将 insertAfter 函数 用 在 我 的 preparePlaceholder 
函数 中 。 首 先 ， 得 到 图 片 清单 : 





var gallery = document.getElementById("imagegallery"); 





BE PK, placeholder (这 个 变量 对 应 着 新 创建 出 来 
的 img 元 素 ) 插入 到 gallery 的 后 面 : 


insertAfter(placeholder, gallery) ; 





placeholder 图 片 现 在 成 了 gallery.html 文档 的 节点 树 
的 组 成 部 分 ， 而 我 们 希望 把 description 文本 段 插入 到 





它 的 后 面 。 我 们 已 经 把 这 个 节点 保存 在 变量 description 
里 了 。 再 次 使 用 insertAfter() 方法 ， 但 这 次 是 把 
description 插入 到 placeholder 的 后 面 : 


insertAfter(description, placeholder); 








增加 了 上 面 这 几 条 语句 之 后 ，preparePlaceholder 函数 
变 成 了 如 下 的 样子 : 


function preparePlaceholder() { 
var placeholder = document.createElement ("img") ; 
placeholder.setAttribute("id", "placeholder" ) ; 
placeholder.setAttribute("src","images/placeholder. gif") ; 
placeholder.setAttribute("alt","my image gallery"); 
var description = document.createElement("p"); 
description.setAttribute("id","description"); 
var desctext - document.createTextNode("Choose an image"); 
description.appendChild(desctext); 
var gallery - document.getElementById("imagegallery"); 
insertAfter(placeholder,gallery); 
insertAfter(description,placeholder); 








事情 还 未 结束 ， 这 个 函数 还 有 最 后 一 个 问题 没有 解决 : 我 
在 新 增加 的 那 几 条 语句 里 使 用 了 一 些 新 的 DOM 方 法 ， 但 
没有 测试 浏览 器 是 否 文 持 它们 。 为 了 确保 这 个 函数 有 足够 
的 退路 ， 还 需要 再 增加 几 条 语句 : 


function preparePlaceholder() { 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false 
var placeholder = document.createElement ("img") ; 
placeholder.setAttribute("id", "placeholder" ) ; 
placeholder.setAttribute("src","images/placeholder. gif") ; 
placeholder.setAttribute("alt","my image gallery"); 
var description = document.createElement("p"); 


description. setAttribute("id", "description" ) ; 

var desctext = document.createTextNode("Choose an image"); 
description. appendChild(desctext) ; 

var gallery = document. getElementById("imagegallery") ; 
insertAfter (placeholder, gallery) ; 

insertAfter (description, placeholder) ; 





7.3.3 图 片 库 二 次 改进 版 


现在 showPic.js 文件 包含 5 个 不 同 的 函数 ， 它 们 是 : 


e addLoadEvent ži 

e insertAfter rK Zi 

. i pl ed 函数 
° Ji eer 函数 

e showPic 函数 


addLoadEvent 和 insertAfter 属于 通用 型 函数 ， 它 们 在 许多 
场合 都 能 派 上 用 场 。 


preparePlaceholder 函数 负责 创建 一 个 img 元 素 和 一 个 p 元 
素 。 这 个 函数 将 把 这 些 新 创建 的 元 素 插 入 到 节点 树 里 图 片 库 清 
单 的 后 面 。prepareGallery 函数 负 贡 处 理事 件 。 这 个 函数 将 
遍历 处 理 图 片 库 清单 里 的 每 个 链接 。 当 用 户 点 击 这 些 链 接 中 的 
某 一 个 时 ， 就 会 调用 showPic KHR. 


showPic 函数 负责 把 * 占 位 符 ? 图 片 切换 为 目标 图 片 。 


为 了 启用 这 些 功 能 ， 用 addLoadEvent 函数 调 
用 preparePlaceholder 和 prepareGallery KMŽ. 


addLoadEvent (preparePlaceholder) ; 
addLoadEvent(prepareGallery) ; 





下 面 是 最 终 完 成 的 showPic.js 文件 : 





function addLoadEvent(func) { 
var oldonload = window.onload; 


if (typeof window.onload != 'function') { 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 


function insertAfter(newElement,targetElement) { 


} 


var parent = targetElement.parentNode; 

if (parent.lastChild == targetElement) { 
parent.appendChild(newElement) ; 

} else { 
parent.insertBefore(newElement, targetElement.nextSibling) ; 


} 


function preparePlaceholder() { 


} 


if (!document.createElement) return false; 

if (!document.createTextNode) return false; 

if (!document.getElementById) return false; 

if (!document.getElementById("imagegallery")) return false; 
var placeholder = document.createElement ("img") ; 
placeholder.setAttribute("id", "placeholder" ) ; 
placeholder.setAttribute("src","images/placeholder. gif"); 
placeholder.setAttribute("alt","my image gallery"); 

var description = document.createElement("p"); 
description.setAttribute("id","description"); 

var desctext - document.createTextNode("Choose an image"); 
description.appendChild(desctext); 

var gallery - document.getElementById("imagegallery"); 
insertAfter(placeholder,gallery); 
insertAfter(description,placeholder); 


function prepareGallery() { 


} 


if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document. getElementById("imagegallery") ; 
var links = gallery.getElementsByTagName("a") ; 
for ( var i=@; i < links.length; i++) { 

links[i].onclick = function() { 

return showPic(this); 


links[i].onkeypress = links[i].onclick; 


} 


function showPic(whichpic) { 


if (!document.getElementById("placeholder")) return true; 
var source = whichpic.getAttribute("href"); 

var placeholder = document.getElementById("placeholder"); 
placeholder. setAttribute("src",source); 

if (!document.getElementById("description")) return false; 


if (whichpic.getAttribute("title")) ( 
var text = whichpic.getAttribute("title"); 
) else { 
var text = ""; 
} 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 
} 
return false; 
j 
addLoadEvent (preparePlaceholder); 
addLoadEvent(prepareGallery); 











JavaScript 代 码 增 加 了 ， 但 标记 相应 的 减少 了 。gallery.html 
文件 现在 只 包含 一 个 由 JavaScript 脚 本 和 CSS 样 式 表 共用 的 “ 挂 
钓 ”"。 这 个 “挂钩 ”就 是 图 片 清 单 的 id 属性 。 





<!DOCTYPE html» 
<html> 
<head> 


«meta http-equiv-"content-type" content="text/html; charset=utf 

<title>Image Gallery</title> 

<link rel="stylesheet" href="styles/layout.css" media-"screen" 
</head> 


<body> 
<h1>Snapshots</h1> 
«ul id-"imagegallery"» 
«li» 


«a href="images/fireworks.jpg" title-"A fireworks display"» 
«img src-"images/thumbnail fireworks.jpg" alt-"Fireworks" /» 
«/a» 
</li> 
<li> 
«a href="images/coffee.jpg" title="A cup of black coffee" > 
<img src="images/thumbnail_coffee.jpg" alt="Coffee" /> 
</a> 
</li> 
<li> 
<a href="images/rose.jpg" title="A red, red rose"> 
<img src="images/thumbnail_rose.jpg" alt="Rose" /> 
</a> 
</li> 


«li» 
«a href="images/bigben.jpg" title="The famous clock"» 
«img src-"images/thumbnail bigben.jpg" alt-"Big Ben" /> 
«/a» 
</li> 
</ul> 
<script src="scripts/showPic.js"></script> 
</body> 
</html> 





现在 ， 图 片 库 的 结构 、 样 式 和 行为 已 经 彻底 分 离 了 。 
把 gallery .html 文件 加 载 到 Web 浏 览 器 里 。 如 图 7-10 所 示 ， 


你 将 看 到 placeholder 图 片 和 description 文本 段 ， 它 们 已 
被 插入 到 imagegallery 清单 后 面 。 
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图 7-10 


我 们 用 JavaScript 动 态 地 创建 了 标记 并 把 它们 添加 到 了 文档 里 。 
JavaScript 还 对 图 片 清单 里 的 所 有 链接 进行 了 预 处 理 。 你 可 以 点 





击 任何 一 个 缩 略图 去 体验 一 下 这 个 图 片 库 ， 如 图 7-11 所 示 。 
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K 7-11 


到 目前 为 止 ， 我 们 创建 的 这 些 新 内 容 对 这 个 页 面 来 说 并 不 算是 
新 的 。 比 如 ， 页 面 加 载 后 ， 标 记 中 就 已 经 存在 title 属性 了 。 
而 通过 createElement 添加 的 新 段落 也 是 基于 磐 入 在 脚本 中 
的 标记 添加 的 。 实 际 上 ， 我 们 创建 的 所 有 一 切 都 包含 在 了 初始 
的 页 面 当 中 。 只 不 过 我 们 通过 脚本 对 它们 进行 了 一 番 重 排 而 
已 。 怎 么 才能 真正 得 到 原来 并 不 存在 于 初始 页 面 中 的 内 容 呢 ? 
下 面 我 们 就 给 出 一 种 解决 方案 。 


7.4 Ajax 


20054, Adaptive Path 公 司 的 Jesse James Garrett 发 明了 Ajax 这 
个 词 ， 用 于 概括 异步 加 载 页 面 内 容 的 技术 。 以 前 ，Wweb 应 用 都 
要 涉及 大 量 的 页 面 刷 新 : 用 户 点 击 了 某 个 链接 ， 请 求 发 送 回 服 
务 器 ， 然 后 服务 器 根据 用 户 的 操作 再 返回 新 页 面 。 即 便 用 户 看 
到 的 只 是 页 面 中 的 一 小 部 分 有 变化 ， 也 要 刷新 和 重新 加 载 整个 
页 面 ， 包 括 公 司 标 志 、 导 航 、 头 部 区 域 、 脚 部 区 域 等 。 


使 用 Ajax 束 可 以 做 到 只 更 新 页 面 中 的 一 小 部 分 。 其 他 内 容 一 一 
标志 、 导 航 、 头 部 、 脚 部 ， 都 不 用 重新 加 载 。 用 户 仍然 像 往 各 
一 样 点 击 链接 ， 但 这 一 次 ， 已 经 加 载 的 页 面 中 只 有 一 小 部 分 区 
域 会 更 新 ， 而 不 必 再 次 加 载 整个 页 面 了 。 


Ajax 的 主要 优势 就 是 对 页 面 的 请 求 以 异步 方式 及 送 到 服务 器 。 
而 服务 器 不 会 用 整个 页 面 来 啊 应 请 求 ， 它 会 在 后 人 台 处 理 请 求 ， 
与 此 同时 用 户 还 能 继续 浏览 页 面 并 与 页 面 区 互 。 你 的 脚本 则 可 
以 按 需 加 载 和 创建 页 面 内 容 ， 而 不 会 打 断 用 户 的 浏览 体验 。 利 
用 Ajax，Web 应 用 可 以 呈现 出 功能 丰富、 区 互 敏捷 、 类 似 昌 面 
应 用 般 的 体验 ， 就 像 你 使 用 谷歌 地 图 时 的 感 党 一 样 。 


和 任何 新 技术 一 样 ，Ajax 有 它 自己 的 适用 范围 。 它 依赖 
JavaScript， 所 以 可 能 会 有 浏览 器 不 文 持 它 ， 而 搜索 引擎 的 蜘蛛 
程序 也 不 会 抓 取 到 有 关内 容 。 




















7.4.1 XMLHttpRequest 对 象 


Ajax 技术 的 核心 就 是 XMLHttpRequest 对 象 。 这 个 对 象 充当 着 
浏览 器 中 的 脚本 (客户 端 ) 与 服务 器 之 间 的 中 间 人 的 角色 。 以 
往 的 请 求 都 由 浏览 器 发 出 ， 而 JavaScript 通 过 这 个 对 象 可 以 自己 
发 送 请 求 ， 同 时 也 上 自己 处 理 啊 应 。 


虽然 有 关 XMLHttpRequest 对 象 的 标准 还 比较 新 (参见 
HIML5) ， 但 这 个 对 象 的 历史 可 谓 久 远 ， 因 而 得 到 了 几乎 所 
有 现代 浏览 器 的 支持 。 但 问题 是 ， 不 同 浏览 器 实现 
XMLHttpRequest 对 象 的 方式 不 太一 样 。 为 了 保证 路 浏览 器 ， 








你 不 得 不 为 同样 的 事情 写 不 同 的 代码 分 文 。 
下 面 我 们 举 一 个 例子 ， 把 以 下 代码 保存 为 ajax.html : 


<!DOCTYPE html» 

<html lang="en"> 

<head> 

<meta charset="utf-8" /> 
<title>Ajax</title> 

</head> 

<body> 


<div id="new"></div> 


<script src="scripts/addLoadEvent.js"></script> 
«script src="scripts/getHTTPObject.js"></script> 
«script src-"scripts/getNewContent.js"»«/script» 
«/body» 
«/html» 





这 个 HTML 文 件 包含 的 addLoadEvent .js 文件 位 于 scripts 
文件 夹 中 ， 访 文件 夹 里 还 有 另外 两 个 新 脚 
Æ: getHTTPObject.js #lgetNewContent.js 。 


为 了 模拟 服务 器 的 响应 ， 在 ajax.html 文件 的 旁边 创建 一 
个 example.txt 文件 ， 包 含 如 下 内 容 : 


This was loaded asynchronously! 





这 个 文件 将 充当 服务 占 端 脚本 的 输出 。 多 数 情 况 下 ， 服 务 器 站 
脚本 在 接 到 请 求 后 ， 还 会 做 一 番 处 理 再 输出 结果 。 但 这 里 我 们 





只 是 为 了 演示 说 明 ， 束 不 搞 那 么 复杂 了 。 接 下 来 我 们 就 编写 
getHTTPObject.js 和 getNewContent.js 这 两 个 脚本 。 


微软 最 早 在 IE5 中 以 ActiveX 对 象 的 形式 实现 了 一 个 名 叫 
XMLHTTP 的 对 象 。 在 正中 创建 新 的 对 象 要 使 用 下 列 代 码 : 


var request = new ActiveXObject("Msxm12.XMLHTTP.3.0"); 





其 他 浏览 器 则 基于 XMLHttpRequest 来 创建 新 对 象 : 


var request = new XMLHttpRequest(); 





TERIA ae, AEEA HOE FH ASIXMLHTTP 对 象 也 不 完全 相 
同 。 为 了 兼容 所 有 浏览 器 ，getHTTPObJject.Jjs 文件 中 的 
getHTTPObject 函数 要 这 样 来 写 : 


function getHTTPObject() { 
if (typeof XMLHttpRequest == "undefined" ) 
XMLHttpRequest = function () { 

try { return new ActivexObject("Msxm12.XMLHTTP.6.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxm12.XMLHTTP.3.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxm12.XMLHTTP"); } 


catch (e) {} 
return false; 


} 
return new XMLHttpRequest(); 


} 





getHTTPObject D D a uM 
。 如 采 失 败 ， 则 继续 检测 其 他 方法 ， 最 终 返 回 false 或 一 个 新 
[XMLHttpRequest (或 XMLHTTP ) 对象。 


这 样 ， 在 你 的 脚本 中 要 使 用 XMLHttpRequest 对 象 时 ， 可 以 将 
这 个 新 对 象 直接 赋值 给 一 个 变量 : 


var request = getHTTPObject(); 





pT 


XMLHttpRequest 对 象 有 许多 的 方法 。 其 中 最 有 用 的 是 open 
方法 ， 它 用 来 指定 服务 器 上 将 要 访问 的 文件 ， 指 定 请 求 类 
型 : GET. POST 或 SEND 。 这 个 方法 的 第 三 个 参数 用 于 指定 请 
求 是 否 以 异步 方式 发 送 和 处 理 。 


在 getNewContent.js 文件 中 添加 下 列 代码 : 





function getNewContent() { 
var request = getHTTPObject(); 
if (request) { 
request.open( "GET", "example.txt", true ); 
request.onreadystatechange = function() { 
if (request.readyState == 4) { 
var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText) ; 
para.appendChild(txt); 
document.getElementById('new').appendChild(para); 
} 
}; 
request.send(null); 
} else { 
alert('Sorry, your browser doesn\'t support XMLHttpRequest’); 
j 


addLoadEvent (getNewContent); 





当 页 面 加 载 完成 后 ， 以 上 代码 会 发 起 一 个 GET 请 求 ， 请 求 
与 ajax.html 文件 位 于 同一 目录 的 example.txt 文件 。 


request.open( "GET", "example.txt", true ) 





代码 中 的 onreadystatechange 是 一 个 事件 处 理 函数 ， 它 会 在 
服务 器 给 XMLHttpRequest 对 象 送 回 啊 应 的 时 候 被 触发 执行 。 





在 这 个 处 理 函 数 中 ， 可 以 根据 服务 器 的 具体 啊 应 做 相应 的 处 


PE. 
在 此 ， 我 们 给 它 指定 了 一 个 处 理 函 数 : 


request.onreadystatechange = function() { 
// 处 理 啊 应 
}; 























当然 ， 也 可 以 引用 一 个 函数 。 下 面 的 代码 就 会 
人 被 触发 时 执行 名 为 doSomething 的 
PR: 


注意 ”在 为 onreadystatechange 指定 函数 引用 时 ， 不 
要 在 函数 名 后 面 加 括号 。 因 为 加 括号 表示 立即 调用 函数 ， 

而 我 们 在 此 只 想 把 函数 自身 的 引用 《而 不 是 函数 结果 ) 赋 
值 给 onreadystate-change 属性 。 


request.onreadystatechange = doSomething; 


在 指定 了 请 求 的 目标 ， 也 明确 了 如 何 处 理 响 应 之 后 ， 就 可 以 
用 send 方法 来 发 送 请 求 了 : 








request.send(null); 


如 采 济 览 器 不 支持 XMLHttpRequest 对 象 ， getHTTPObject 


函数 会 返回 false ， 因 此 你 还 要 处 理 好 这 种 情况 。 


服务 器 在 向 XMLHttpRequest 对 象 发 回响 应 时 ， 该 对 象 有 许多 
属性 可 用 ， 浏览 器 会 在 个 同 阶段 更 新 readyState 属性 的 值 ， 
它 有 5 个 可 能 的 值 : 





0 表示 未 初始 化 
1 表示 正在 加 载 
2 表示 加 载 完 毕 
3 表示 正在 交互 
。 4 表示 完成 


只 要 readyState 属性 的 值 变 成 了 4， 就 可 以 访问 服务 器 发 送 
回来 的 数据 了 。 


访问 服务 器 发 送 回来 的 数据 要 通过 两 个 属性 完成 。 一 个 

是 responseText 属性 ， 这 个 属性 用 于 保存 文本 字符 串 形式 的 
数据 。 另 一 个 属性 是 responseXML 属性 ， 用 于 保存 Content- 

Type 头 部 中 指定 为 "text/xm1" 的 数据 ， 其 实 是 一 

个 DocumentFragment 对 象 。 你 可 使 用 各 种 DOM 方 法 来 处 理 

这 个 对 象 。 而 这 也 正 是 XMLHttpRequest 这 个 名 称 里 有 XML 的 
原因 。 


在 这 个 例子 中 ，onreadystatechange 事件 处 理 函 数 在 等 

到 readyState 值 变 成 4 之 后 ， 就 会 从 responseText 属性 里 取 
得 文本 数据 ， 然 后 把 数据 放 到 一 个 段落 中 ， 再 将 新 段落 添加 到 
DOME: 





request.onreadystatechange = function() { 
if (request.readyState == 4) { 
var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText) ; 
para.appendChild(txt); 


document.getElementById('new').appendChild(para); 








此 时 ，example.txt 文件 中 的 文本 内 容 就 会 出 现在 id Anew 
的 div 元 素 中 ， 如 图 7-12 所 示 。 


Ajax 


ne FE file:///Users/jsambells/Desktu, G | Q; Gongle > 





ew 





| This was loaded asynchronously! 








图 7-12 


注意 “在 使 用 Ajax 时 ， 千 万 要 注意 同 源 策略 。 使 

用 XMLHttpRequest 对 象 发 送 的 请 求 只 能 访问 与 其 所 在 的 
HIML 处 于 同一 个 域 中 的 数据 ， 不 能 向 其 他 域 发 送 请 求 。 
此 外 ， 有 些 浏览 器 还 会 限制 Ajax 请 求 使 用 的 协议 。 比 如 在 
Chrome 中 ， 如 果 你 使 用 包 e:/ 协 议 从 自己 的 硬盘 里 加 

载 example.txt 文件 ， 就 会 看 到 “Cross origin requests are 
only supported for HTTP”( 跨 域 请 求 只 文 持 HTTP 协 议 ) 的 
错误 消息 。 


异步 请 求 有 一 个 容易 锌 忽略 的 问题 是 异步 性 ， 束 是 脚本 在 发 
送 XMLHttpRequest 请 求 之 后 ， 仍 然 会 继续 执行 ， 不 会 等 待 啊 
应 返回 。 为 了 证 明 这 一 点 ， 可 以 

在 request.onreadystatechange Ab FH pK Zr rp All 
getNewContent 函数 的 最 后 各 添加 一 个 警告 框 : 








function getNewContent() { 
var request = getHTTPObject(); 
if (request) { 
request.open( "GET", "example.txt", true ); 
request.onreadystatechange - function() ( 


if (request.readyState == 4) { 
alert("Response Received"); 
var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText) ; 
para.appendChild(txt); 
document.getElementById('new').appendChild(para); 
} 

}; 

request.send(null); 

} else { 
alert('Sorry, your browser doesn\'t support XMLHttpRequest’); 


alert("Function Done"); 


addLoadEvent (getNewContent) ; 








现在 加 载 一 下 页 面试 试 ， 很 可 能 显示 “Function Done” 的 警告 框 
4751 Response Received” 的 警告 框 出 现 。 这 融 证 明了 脚本 不 
会 等 待 send 的 响应 ， 而 是 会 继续 执行 。 之 所 以 说 “很 可 能 ”， 





古 因 为 有 时 候 服 务 需 的 啊 应 也 会 非常 快 。 如 果 你 是 从 本 地 硬盘 
上 加 载 文件 ， 请 求 和 啊 应 几乎 会 同时 发 生 。 而 如 果 是 从 手机 浏 
览 露 中 加 载 页 面 ， 那 么 在 收 到 啊 应 之 前 轴 怕 就 要 等 很 长 时 间 。 


为 此 ， 如 果 其 他 脚本 依赖 于 服务 器 的 响应 ， 那 么 就 得 把 相应 的 
代码 都 转移 到 指定 给 onreadystatechange 属性 的 那个 函数 
中 。 上 面 例子 中 添加 DOM 元 素 的 代码 就 是 一 个 例子 。 


XMLHttpRequest 对 象 实际 上 是 非常 简单 的 ， 也 没有 什么 值得 
大 书 特 书 的 地 方 。 不 过 ， 只 要 发 挥 一 点 想象 力 ， 你 就 可 以 通过 
它 达 成 令 人 炫目 的 效果 。 








Ajax 之 挑战 


总 的 来 说 ，Ajax 技 术 还 是 给 我 们 带 了 很 多 好 处 。 利 用 它 ， 

可 以 增强 冰点 的 可 用 性 ， 用 户 无 须 刷 新 页 面 ， 从 而 可 以 很 
但 与 此 同时 ， 这 个 新 技术 也 给 我 们 提出 了 
一 些 挑战 。 


Ajax 应 用 的 一 个 特色 就 是 减少 重复 加 载 页 面 的 次 数 。 但 这 
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突 ， 导 致 用 户 无 法 使 用 后 退 按钮 或 者 无 法 为 特定 状态 下 的 
页 面 添加 书签 。 


只 更 新 部 分 页 面 区域 的 特性 也 会 影响 到 用 户 的 预期 。 理 想 
情况 ， 用 户 的 每 一 次 操作 都 应 该 得 到 一 个 清晰 明确 的 结 
末 。 为 此 ，Web 设 计 人 员 必 须 在 同 服 务 器 发 出 请 求 和 服务 
器 返 回 啊 应 时 ， 给 用 户 明 确 的 提示 。 


要 构建 成 功 的 Ajax 应 用 ， 关 键 在 于 将 Ajax 功能 看 做 一 般 的 
JavaScript 增 强 功能 ， 在 平稳 退化 的 基础 上 求 得 渐进 增强 。 


7.4.2 ”渐进 增强 与 Ajax 


由 于 Ajax 应 用 能 够 让 用 户 感觉 到 响应 迅速 而 透明 ， 很 多 人 都 认 
为 它 更 像 传统 的 桌面 应 用 ， 而 不 是 网 站 。 虽 然 这 种 说 法 在 某 种 
意义 上 是 正确 的 ， 但 却 很 容易 误导 人 ， 很 容易 让 人 觉得 可 以 毫 
ENEE Ajax, 而 不 必 像 在 创建 网 站 那样 考虑 可 用 性 和 可 
访问 性 。 


很 多 站 点 使 用 了 Ajax 技术 并 明确 要 求 必 须 局 用 JavaScript 才 能 
向 访问 网 站 的 内 容 。 有 一 种 观点 为 此 辩护 ， 今 天 站 点 提供 的 功 
能 是 如 此 丰富 ， 根 本 不 可 能 做 到 平稳 退化 。 


我 不 赞同 这 种 观点 。 实 际 上 ， 我 认为 能 够 通过 Ajax 实现 的 应 用 
一 定 也 可 以 通过 其 他 非 Ajax 技术 来 实现 。 归 根 结 砍 ， 要 看 你 怎 
ZA Ajax. 


如 果 你 从 一 开始 设计 就 以 Ajax 为 起 点 ， 那 么 以 后 确实 很 难 把 它 
从 成 品 站 点 中 和 剥离 出 来 ， 再 额外 提供 一 个 不 使 用 Ajax 的 版 本 。 
但 是 ， 如 果 一 开始 你 的 应 用 就 是 基于 老式 的 页 面 刷新 机 制 构建 
的 ， 那 么 就 可 以 在 既 有 框架 基础 上 ， 用 Ajax 拦 住 发 送 到 服务 器 
的 请 求 ， 并 将 请 求 转交 给 XMLHttpRequest 对 象 处 理 。 这 种 情 
况 下 ，Ajax 功 能 就 扮演 了 一 个 位 于 常规 站 点 之 上 的 层 。 


这 种 说 法 听 起 来 有 点 耳 熟 ， 是 吗 ? 这 跟 我 们 第 5 章 讨论 的 渐进 
增强 理念 没有 什么 区 别 。 从 一 开始 就 依赖 Ajax 构建 核心 应 用 ， 
无 异 于 从 一 开始 就 使 用 javascript: 伪 协议 去 处 理 点 击 链 接 的 操作 











(同样 也 在 第 5 章 讨论 过 ) 。 对 于 后 者 ， 更 好 的 方式 当然 是 只 
使 用 常规 的 链接 ， 然 后 通过 JavaScript 去 拦截 默认 动作 。 同 样 的 
道理 ， 构 建 Ajax 网 站 的 最 好 方法 ， 也 是 先 构建 一 个 常规 的 网 
站 ， 然 后 Hijax 它 。 


7.4.3 Hijax 


如 果 说 Ajax 的 成 功 要 归功 于 它 的 这 个 简短 好 记 的 名 字 ， 让 人 提 
到 它 的 时 候 不 用 再 说 “XMLHttpRequest 和 DOM 肢 本 编程 、 

CSS， 以 及 (X)HTML”， 而 只 要 说 “Ajax” 束 可 以 了 。 那 么 ， 你 
只 要 说 “Hijax” ， 别 人 也 就 明白 它 指 的 是 “渐进 增强 地 使 用 
Ajax". 

















1 Jeremy Keith 借 用 了 hijack (SHER) 一 词 的 发 音 和 含义 ， 意 思 就 是 拦截 用 户 操作 触 
发 的 请 求 。 译 者 注 





Ajax 应 用 主要 依赖 后 台 服 务 器 ， 实 际 上 是 服务 器 端的 脚本 语言 
完成 了 绝 大 部 分 工作 。XMLHttpRequest 对 象 作 为 浏览 器 与 服 
务 器 之 间 的 “中 间 人 ”， 它 只 是 负责 传递 请 求 和 响应 。 如 果 把 这 
个 中 间 人 请 开 ， 浏 览 器 与 服务 器 之 间 的 请 求 和 响应 应 该 继续 完 
成 〈 而 不 是 中 断 ) ， 只 不 过 花 的 时 间 可 能 会 长 一 点 点 。 


想 一 想 登 录 表 单 ， 构 建 它 最 简单 的 办 法 束 是 按照 老 传统 ， 让 表 
单 把 整个 页 面 都 提交 到 服务 器 ， 然 后 服务 器 再 发 回来 一 个 包含 
反馈 的 新 页 面 。 所 有 处 理 操作 都 在 服务 器 上 完成 ， 而 用 户 在 表 
单 中 输入 的 数据 则 由 服务 器 负 贡 取得 并 与 保存 在 数据 库 里 的 数 
据 进 行 比 较 ， 看 是 不 是 真 的 存在 这 么 个 用 户 。 


然后 ， 为 了 给 这 个 登录 表单 添加 Ajax 功 能 ， 就 需要 拦截 提交 表 
单 的 请 求 (Hijax 嘛 ) ， 让 XMLHttpRequest 请 求 来 代为 发 送 。 
提交 表单 触发 的 是 submit 事件 ， 因 此 只 要 通过 onsubmit 事件 
处 理 函 数 捕获 该 事件 ， 就 可 以 取消 它 的 默认 操作 (提交 整个 页 
面 )， 然 后 代 之 以 一 个 新 的 操作 : 通过 XMLHttpRequest 对 象 
向 服务 器 发 送 数据 。 


拦截 了 登录 表单 的 提交 请 求 之 后 ， 登 录 过 程 束 可 以 让 用 户 感觉 
更 方便 。 啊 应 时 间 加 快 了 ， 不 必 刷 新 整个 页 面 了 。 可 是 ， 万 一 
用 户 的 浏览 器 没有 启动 JavaScript 呢 ? 没关系 ， 登 录 表 单 照 样 能 

















让 用 户 正 常 登录 。 只 不 过 所 花 时 间 要 长 一 点 ， 用 户 体 验 没 有 那 
么 流畅 罢了 。 上 毕竟 ， 处 理 登 录 验 证 的 操作 都 在 服务 器 上 啊 ， 有 
什么 理由 让 没有 JavaScript 的 用 户 不 能 登录 呢 ! 


请 大 家 记 住 这 个 事实 ，Ajax 应 用 主要 依赖 于 服务 器 端 处 理 ， 而 
非 客户 端 处 理 。 既 然 如 此 ， 它 就 没有 理由 不 能 做 到 平稳 退化 。 
不 可 否认 ， 有 些 应 用 如 果 没 有 了 Ajax 而 只 依靠 页 面 刷新 ， 用 户 
的 每 一 次 操作 可 能 都 要 等 很 长 时 间 。 但 慢 一 点 的 退化 的 体验 ， 
是 不 是 仍然 要 比 完全 没有 体验 更 好 呢 ? 


第 12 章 在 构建 一 个 完整 的 网 站 示例 时 ， 将 详细 介绍 如 何 利用 
Hijax 技 术 。 





7.5 小结 
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标记 的 办 法 。 我 们 还 简要 地 回顾 了 两 种 “传统 的 ”技术 : 


e document.write 方法 
e innerHTML 属性 


之 后 你 看 到 了 一 些 有 一 定 深 度 的 利用 DOM 方 法 来 动态 创建 标 
记 的 例子 。 


createElement 方法 
createTextNode 方法 
appendChild 方法 
insertBefore 方法 


使 用 这 些 方法 的 关键 是 将 Web 文 档 视 为 节点 树 。 请 记 住 ， 你 
用 createElement 或 createTextNode 方法 刚刚 创建 出 来 的 
节点 只 是 JavaScript 世 界 里 的 孤儿 。 利 用 appendChild 
MinsertBefore 方法 ， 可 以 把 这 些 DocumentFragment 对 象 
插入 某 个 文档 的 节点 树 ， 让 它们 呈现 在 浏览 器 窗口 里 。 


在 这 一 章 里 ， 你 还 看 到 了 如 何 对 图 片 库 做 进一步 改进 。 你 还 看 
到 了 一 个 非常 实用 的 insertAfter 函数 的 构建 过 程 。 在 需要 
把 一 些 标记 添加 到 文档 时 ， 这 个 函数 往往 能 帮 上 大 忙 。 


本 章 还 简要 讨论 了 Ajax 和 有 异步 请 求 ， 这 些 内 容 将 在 第 12 章 更 详 
细 地 介绍 。 


在 下 一 章 里 ， 你 将 会 看 到 更 多 问 文 档 添加 标记 的 例子 ， 学 会 动 
态 创建 一 些 很 有 用 的 信息 块 来 增强 你 的 文档 。 











HEE 充实 文档 的 内 容 
本 章 内 容 


。 一 个 为 文档 创建 < 缩 略语 列表 ”的 函数 
。 一 个 为 文档 创建 "文献 来 源 链 接 ” 的 函数 
。 一 个 为 文档 创建 “快捷 键 清 单 ” 的 函数 


上 一 章 你 已 经 学 会 利用 DOM 方 法 和 属性 来 动态 创建 标记 。 在 
这 一 章 里 你 将 继续 在 实践 中 应 用 这 些 技术 。 你 会 通过 DOM 便 
建 一 些 标记 片段 并 随后 把 它们 添加 到 网 页 。 从 friends of ED 网 
站 Chttp://friendsofed.com/ ) 本 书 的 下 载 页 面 你 可 以 找到 这 些 
函数 的 完整 版 本 。 








8.1 不 应 该 做 什么 


理论 上 ， 你 可 以 用 JavaScript 把 一 些 重 要 的 内 容 添加 到 网 页 上 。 
事实 上 这 是 一 个 坏 主 意 ， 因 为 这 样 一 来 JavaScript 就 没有 任何 空 
间 去 平稳 退化 。 那 些 缺 乏 必要 的 JavaScript 文 持 的 访问 者 就 会 永 
远 也 看 不 到 你 的 重要 内 容 。 至 少 到 现在 为 止 ， 各 大 搜索 引擎 网 
站 的 搜索 机 器 人 Csearchbot) 还 几乎 不 文 持 JavaScript。 


如 果 你 觉察 到 自己 正在 使 用 DOM 技 术 把 一 些 重要 的 内 容 添 加 
到 网 页 上 ， 则 应 该 立刻 停 下 来 去 检讨 你 的 计划 和 思路 。 你 很 可 
能 会 发 现 自己 正在 滥用 DOM 1! 


第 5 章 我 们 讨论 过 ， 下 面 这 两 项 原则 要 牢记 在 心 。 


e 渐进 增强 (progressive enhancement) 。 渐 进 增强 原则 其 于 
这 样 一 种 思想 : 你 应 该 总 是 从 最 核心 的 部 分 ， 也 就 是 从 内 
容 开 始 。 应 该 根据 内 容 使 用 标记 实现 民 好 的 结构 ;然后 再 
逐步 加 强 这 些 内 容 。 这 些 增强 工作 既 可 以 是 通过 CSS 改 进 
呈现 效果 ， 也 可 以 是 通过 DOM 添 加 各 种 行为 。 如 果 你 正 
在 使 用 DOM 添 加 核心 内 容 ， 那 么 你 添加 的 时 机 未 免 太 返 
I 内 容 应 该 在 刚 开 始 编写 文档 时 就 成 为 文档 的 组 成 部 
^Y s 

平稳 退化 。 渐 进 增强 的 实现 必然 支持 平稳 退化 。 如 果 你 按 
照 渐进 增强 的 原则 去 充实 内 容 ， 你 为 内 容 添加 的 样式 和 行 
为 就 自然 支持 平稳 退化 ， 那 些 缺 乏 必 要 的 CSS 和 DOM 文 持 
的 访问 者 仍 可 以 访问 到 你 的 核心 内 容 。 如 果 你 用 JavaScript 
去 添加 这 些 重 要 内 容 ， 它 就 没 法 文 持 平稳 退化 ， 不 文 持 
JavaScript， 束 看 不 到 内 容 。 这 好 像 是 一 种 限制 ， 其 实 不 
是 ， 利 用 DOM 去 生成 内 容 有 着 广泛 的 用 途 。 
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现 如 今 的 Web 设 计 人 员 能 够 从 许多 方面 对 网 页 的 显示 效果 加 以 
控制 。 在 对 包含 在 HTML 标 记 内 的 内 容 设置 样式 时 ，CSS 提 供 
了 非常 强大 的 功能 。 这 种 技术 早已 超越 了 对 网 页 内 容 的 字体 和 
颜色 进行 简单 调整 的 初级 阶段 。 利 用 CSS， 我 们 可 以 把 原本 纵 
问 排 列 的 元 素 显 示 成 一 行 。 第 6 章 JavaScript 图 片 库 页 面 上 由 纵 
略图 构成 的 图 片 清单 就 是 一 个 很 好 的 例子 。 包 含 在 <1i> 标签 
里 的 列表 项 在 通常 情况 下 各 占 一 行 ， 但 在 我 把 每 个 列表 项 的 
display 属性 设置 为 jnline 之 后 ， 那 些 列表 项 在 浏览 器 窗口 
里 从 纵 同 排列 变 成 了 横 回 排列 。 


反 过 来 也 是 可 以 的 。 对 于 通 芝 是 横 癌 排列 的 元 素 ， 只 需 把 它 的 
display 属性 设置 为 block ， 就 可 以 让 这 个 元 素 独 占 一 行 。 如 
果 把 某 个 元 素 的 display 属性 设置 为 none ， 甚 至 可 以 让 它 根 

本 不 出 现在 浏览 器 窗口 里 ， 这 个 元 素 仍 是 DOM 节 点 树 的 组 成 

部 分 ， 只 是 浏览 器 不 显示 它们 而 已 。 


除了 标签 之 间 的 内 容 以 外 ， 标 签 内 的 属性 中 也 包含 语义 信息 。 
在 对 内 容 进行 标记 时 ， 正 确 地 设置 标记 属性 也 是 工作 的 重要 组 
成 部 分 。 


绝 大 多 数 属性 的 内 容 即 属性 值 》 在 Web 浏 览 器 里 都 是 不 显示 
的 ， 只 有 极 少数 属性 例外 ， 但 不 同 的 浏览 器 在 呈现 这 些 例外 的 
属性 时 却 常 常 千姿百态 。 比 如 说 ， 有 些 浏览 器 会 把 title 属性 
的 内 容 显示 为 弹出 式 的 提示 框 ， 另 一 些 浏览 器 则 会 把 它们 显示 
在 状态 栏 里 。 有 些 浏览 器 会 把 alt 属性 的 内 容 显示 为 弹出 式 的 
提示 框 ， 这 导致 了 对 alt 属性 的 广泛 滥用 。 这 个 属性 原本 的 用 
途 是 ， 在 图 片 不 可 用 (无 法 显示 ) 时 用 一 段 描述 文字 来 解释 这 
个 位 置 的 图 片 。 

在 显示 属性 这 个 问题 上 ， 你 只 能 听任 浏览 器 摆布 。 其 实 只 需要 
二 各 DOM 钢 程 ， 我 们 就 能 够 把 这 种 控制 权重 新 掌握 在 自 忆 
JFE, 
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。 得 到 隐藏 在 属性 里 的 信息 。 
。 创建 标记 封装 这 些 信 息 。 
。 把 这 些 标记 插入 到 文档 。 


这 与 简单 地 利用 DOM 去 新 建 一 些 内 容 有 所 区 别 。 在 本 章 的 例 
子 里 ， 这 些 内 容 已 经 存在 于 标记 之 中 ， 你 要 利用 JavaScript 和 
DOM 复 制 这 些 内 容 并 以 另外 一 种 结构 呈现 它们 。 





8.3 内容 


和 往常 一 样 ， 任 何 网 页 都 以 内 容 为 出 发 点 。 现 在 拿 下 面 这 段 文 
字 作 为 你 的 出 发 点 : 


What is the Document Object Model? 

The W3C defines the DOM as: 

A platform- and language-neutral interface that will allow progra 
and scripts to dynamically access and update the 


content, structure and style of documents. 
It is an API that can be used to navigate HTML and XML documents. 





给 这 段 文字 加 上 适当 的 标记 : 


<h1>What is the Document Object Model?</h1> 
<p> 
The «abbr title-"World Wide Web Consortium" >W3C</abbr> defines 
=the «abbr title-"Document Object Model">DOM</abbr> as: 
</p> 
«blockquote cite="http://www.w3.org/DOM/"> 

<p> 
A platform- and language-neutral interface that will allow progra 
wand scripts to dynamically access and update the 
content, structure and style of documents. 

</p> 
</blockquote> 
<p> 
It is an <abbr title="Application Programming Interface">API</abb 
that can be used to navigate <abbr title="HyperText Markup Lang 
wHTML</abbr> and «abbr title="eXtensible Markup Language" >XML 
w</abbr> documents. 
</p> 





这 段 文本 包含 大 量 的 缩 略 语 ， 上 面 己 经 都 用 <abbr> 标签 把 它 
们 都 标识 出 来 了 。 


注意 «abbr» bj 5 «acronym» 这 两 个 标签 之 间 的 区 别 
一 直 纠 缠 不 清 。<abbr> 标签 的 含义 是 “ 缩 略语 ”( 源 上 自贡 

文 单词 abbreviation) ， 它 是 对 单词 或 短语 的 简写 形式 的 统 
称 。<acronym> 标签 的 含义 是 被 当成 一 个 单词 来 读 的 “ 首 
字母 缩写 词 ”( 源 自 英文 单词 acronym) 。 如 果 你 把 DOM 

念 成 一 个 单词 dom， 它 就 是 一 个 首 字 母 缩 写 词 ， 如 果 你 把 
它 念 成 三 个 字母 D-O0-M， 它 就 是 一 个 缩 上 略语 。 所 有 的 首 字 
母 缩 略 词 都 是 缩 略 语 ， 但 不 是 所 有 的 缩 略 语 都 是 首 字母 缩 
略 词 。 为 避免 混乱 持续 下 去 ， 在 HIML5 中 <acronymy> 标 

签 已 被 <abbr> 标签 代 蔡 。 


现在 已 经 把 那 段 文本 改写 成 一 个 标记 片段 ， 你 需要 把 它 扩 展 为 
一 个 完整 的 网 页 。 具 体 地 说 ， 要 先 把 这 段 内 容 放 入 <body> 标 

签 ， 再 把 这 个 body 元 素 以 及 相应 的 head 元 素 放 入 <html> 标 
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8.3.1 村 用 HTML、XHTML ÆHTML5 


对 于 标记 而 言 ， 选 用 HITML 还 是 XHTML 是 你 的 自由 。 重 要 的 
是 不 管 选 用 的 哪 种 文档 类 型 ， 你 使 用 的 标记 必须 与 你 选用 的 
DOCTYPE 声明 保持 一 致 。 


就 个 人 而 言 ， 我 更 喜欢 使 用 XHTML 规则 ， 使 用 一 个 DOCTYPE 
让 浏览 器 采用 更 严格 的 呈现 方案 。 它 对 允许 使 用 的 标记 有 着 更 
严格 的 要 求 ， 而 这 可 以 督促 我 写 出 更 严谨 清晰 的 文档 。 比 如 
说 ， 在 写 标 签 和 属性 时 ，HTML 既 允许 使 用 大 写字 母 〈 比 如 
<P>) ， 也 人 允许 使 用 小 写字 母 〈 比 如 xp> ) ; XHTML 却 要 求 
所 有 的 标签 名 和 属性 名 都 必须 使 用 小 写字 母 。 


HTML 在 某 些 情况 下 会 允许 省 略 结束 标签 ， 比 如 说 ， 你 可 以 省 
略 </p> 和 </1i> 标签 。 表 面 上 看 它 提 供 了 一 种 弹性 ， 但 事实 
上 一 旦 文档 在 浏览 器 里 的 呈现 效果 与 你 的 预期 不 符 ， 妃 查 问题 
的 根源 将 变 得 十 分 困难 。 在 XHTML 的 世界 里 ， 所 有 的 标签 都 
必须 闭合 一 一 对 诸如 <img> 和 <br> 之 类 的 孤立 元 素 也 不 例 

外 : 在 书写 时 它们 必须 有 一 个 反 和 斜 线 字 符 表 示 标 签 结束 : 

即 <img/> 和 <br/> 这 样 。 注 意 ， 为 了 与 早期 的 浏览 器 保持 兼 
容 ， 应 该 在 反 斜 杠 字 符 的 前 面 保 留 一 个 空格 。 使 用 严格 的 











DOCTYPE 对 验证 工具 跟踪 错误 会 有 很 大 的 帮助 。 
若 要 使 用 XHTML DOCTYPE ， 应 将 下 列 内 容 写 在 文档 开头 : 


<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd"» 
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<!DOCTYPE html» 





总 共 才 15 个 字符 。 简 短 好 记 ， 并 且 容 易 输入 。 而 且 这 个 文档 声 
明 同 样 也 支持 HIML 和 XHTML 标记 。 要 详细 了 解 HIML5， 请 
看 第 11 章 。 


注意 ” 荣 些 浏览 器 要 根据 DOCTYPE 来 决定 使 用 标准 模 
式 ， 还 是 使 用 兼容 模式 来 呈现 页 面 。 兼 容 模式 意味 着 浏览 
器 要 模仿 某 些 早期 浏览 器 的 “怪异 行为 ”， 并 容许 那些 不 规 
范 的 页 面 在 新 浏览 器 也 能 正常 工作 。 一 般 来 说 ， 我 们 都 应 
该 坚持 使 用 标准 模式 ， 避 人 免 触 发 兼容 模式 。 谢 天 谢 地 ， 
HTML5 DOCTYPE 默认 对 应 的 就 是 标准 模式 。 








XHTML5 


假如 真 想 较真 ， 可 以 走 XHTML5 的 路 线 ， 让 Web 服 务 器 以 
application/xhtml«xml 的 MIME 类 型 来 响应 页 面 ， 但 
必须 预先 警告 。 


XHTML5 本 质 上 是 使 用 严格 的 XML 规则 编写 的 HTML5。 
从 技术 角度 说 ，Web 浏 览 器 应 该 将 任何 XHTML5 文 档 都 视 








为 XML 文档 ， 而 不 是 HTML 文 档 。 而 在 现实 中 ， 你 还 得 在 
文档 的 头 部 发 送 正 确 的 MIME 类 型 ， 
EJapplication/xhtml+xml 。 有 些 浏览 器 不 认识 这 个 
MIME 类 型 ， 因 而 一 般 要 在 服务 器 前 对 浏览 器 进行 探查 后 
再 发 送 。 否 则 最 坏 的 情况 ， 页 面 很 可 能 根本 不 会 在 浏览 器 
中 呈现 。 因 此 ， 绝 大 多 数 XHTML 页 面 仍 然 是 以 HTML 类 
型 发 送 的 。 


如 果 使 用 了 XHTML5， 而 且 MIME 类 型 也 正确 ， 那 么 你 的 
页 面 除 了 在 某 些 浏览 器 中 可 能 无 法 呈现 之 外 ， 有 些 HTML 
DOM 属 性 ， 如 document .write 也 将 无 法 使 用 。 当 然 ， 
核心 DOM 方 法 总 是 能 正常 使 用 的 。 不 仅 在 XHTML5 中 ， 
在 任何 有 效 的 XML 文档 中 ， 核 心 DOM 方 法 都 畅行 无 阻 。 


下 面 是 按照 HIML5 规范 完成 的 最 终 标记 文件 
explanation.html : 











<!DOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
</head> 
<body> 
«hi»What is the Document Object Model?</h1> 
<p> 
The «abbr title-"World Wide Web Consortium" >W3C</abbr> defines th 
Object Model">DOM</abbr> as: 
</p> 
«blockquote cite="http://www.w3.org/DOM/"> 
<p> 
A platform- and language-neutral interface that will allow progra 
mand scripts to dynamically access and update the 
content, structure and style of documents. 
«/p» 
«/blockquote» 
«p» 
It is an «abbr title-"Application Programming Interface">API</abb 
that can be used to navigate <abbr title-"HyperText Markup Lang 
w-HTML«/abbr» and «abbr title-"eXtensible Markup Language"»XML 
wx</abbr> documents. 
«/p» 
«/body» 


</html> 


T A KE Webi vas FIX TA, AE S33] a ee UU 
何 显 示 那 些 标 记 内 容 的 ， 如 图 8-1 所 示 。 有 些 浏览 器 会 把 文档 
中 的 缩 略 语 (<abbr> 标签 ) 显示 为 带 有 下 划 线 或 下 划 点 的 文 
本 ， 男 一 些 浏览 器 则 会 把 缩 略 语 显 示 为 斜体 字 。 


Explaining the Document Object Model 
“XN 
What is the Document Object Model? 


The W3C defines the DOM as: 





A platform- and language-neutral interface that will allow programs and scripts to 
dynamically access and update the content, structure and style of documents. 





图 8-1 
8.3.2 CSS 





虽然 我 还 未 给 explanation.html 文档 配 上 任何 样式 表 ， 但 样 
式 显 然 已 经 在 起 作用 了 。 这 是 因为 每 种 浏览 器 都 有 一 些 自 己 的 
默认 样式 。 


我 们 可 以 用 目 己 的 样式 表 来 取代 浏览 器 的 默认 样式 。 请 看 下 面 
这 个 例子 : 





body { 
font-family: "Helvetica", "Arial",sans-serif; 


font-size: 10pt; 
} 
abbr { 
text-decoration: none; 
border: 0; 
font-style: normal; 


} 





把 这 个 样式 表 保 存 为 typography.css 文件 ， 并 将 其 放 到 子 目 
录 styles 里 去 。 


在 explanation.html 文档 的 <head> 部 分 增加 一 条 语句 : 


<link rel="stylesheet" media-"screen" 


href="styles/typography.css 





现在 你 把 explanation.html 文档 加 载 到 一 个 web 浏览 器 里 ， 
可 以 看 到 一 些 差 别 。 这 份 文档 的 字体 变 了 ， 其 中 的 缩 略 语 已 看 
不 出 有 特别 之 处 ， 如 图 8-2 所 示 。 


eoo Explaining the Document Object Model 


god 
What is the Document Object Model? 


The W3C defines the DOM as: 








A platform- and language-neutral interface that will allow programe and scripts to dynamically 
access and update | the content, structure and style of document 


It is an API that can be used to navigate HTML and XML documents. 





图 8-2 
8.3.3 JavaScript 


缩 略 语 (<abbr> 标签 ) 的 title 属性 在 浏览 器 里 是 隐藏 的 。 

有 些 浏览 融会 在 你 把 鼠标 指针 基 俘 在 缩 略 语 上 时 ， 将 它 的 

title 属性 显示 为 一 个 弹出 式 的 提示 消息 。 就 像 浏览 圳 所 使 用 
o esee 浏览 器 对 缩 略 语 的 默认 呈现 行为 也 是 各 有 各 
和 做 法 。 


就 像 我 们 可 以 用 上 自己 的 CSS 样 式 表 去 取代 浏览 右 所 使 用 的 默认 
样式 那样 ， 你 也 可 以 用 DOM 去 改变 浏览 器 的 默认 行为 。 


8.4. SAN ES TR I A” 


要 能 把 这 些 cabbr> 标签 中 的 title 属性 集中 起 来 显示 在 一 个 

页 面 该 多 好 ! 用 一 个 定义 列表 元 素来 显示 这 些 cabbr> 标签 包 
a 属性 最 合适 不 过 了 。 下 面 是 我 希望 得 到 的 定 
XA 








«dl» 
«dt»W3C«/dt» 
«dd»World Wide Web Consortium«/dd» 
«dt»DOM«/dt» 
«dd»Document Object Model«/dd» 
<dt>API</dt> 
<dd>Application Programming Interface</dd> 


<dt>HTML</dt> 

<dd>HyperText Markup Language</dd> 

<dt>XML</dt> 

<dd>eXtensible Markup Language</dd> 
«/dl» 





你 可 以 使 用 DOM 来 创建 这 个 定义 列表 ， 有 具体 步骤 如 下 。 
(1) 遍历 这 份 文 档 中 的 所 有 abbr 元 素 。 

(2) 保存 每 个 abbr 元 素 的 title 属性 。 

(3) 保存 每 个 abbr 元 素 包含 的 文本 。 

(4) 创建 一 个 “定义 列表 ”元素 《〈 即 dl 元 素 ) 。 

(5) 遍历 刚才 保存 的 title 属性 和 abbr 元 素 的 文本 。 

(6) 创建 一 个 “定义 标题 "元素 〈 即 dt 元 素 ) 。 

(7) 把 abbr 元 又 的 文本 插入 到 这 个 dt 元 素 。 

(8) 创建 一 个 “定义 描述 ”元 素 〈 即 dd 元 素 ) 。 





(9) title 属性 插入 到 这 个 dd 元 素 。 

(10) 把 dt 元 素 妃 加 到 第 4 步 创 建 的 d1 元素 上 。 

(11) 把 dd 元 素 追 加 到 第 4 步 创 建 的 dl 元 素 上 。 

(12) 把 dl 元 素 追 加 到 explanation.html 文档 的 body 元 素 


我 们 编写 一 个 函数 来 做 上 面 这些 事 。 
8.4.1 43 displayAbbreviations 函数 


我 们 把 这 个 函数 命名 为 displayAbbreviations() 。 创 建 一 
个 名 为 displayAbbreviations .js 的 文件 并 将 其 存放 到 子 目 
录 scripts。 


第 一 步 是 定义 这 个 函数 。 因 为 它 不 需要 任何 参数 ， 所 以 函数 名 
后 面 的 圆 括号 将 是 空 的 : 





function displayAbbreviations() { 





开始 遍历 这 份 文 档 里 的 所 有 abbr 元 素 之 前 ， 我 们 必须 先 把 它 
们 找 出 来 。 这 可 以 用 getElementsByTagName 方法 轻松 完 

成 : 只 需 把 abbr 作为 参数 传递 给 这 个 方法 ， 它 束 会 返回 一 个 
包含 这 个 文档 里 的 所 有 abbr 元 素 的 节点 集合 。【〔 前 面 提 到 
过 ， 节 点 集合 就 是 一 个 由 节点 构成 的 数组 ) 。 我 把 这 个 数组 保 
存 到 变量 abbreviations 里 : 


var abbreviations = document.getElementsByTagName("abbr"); 





现在 ， 我 们 可 以 开始 遍历 abbreviations 数组 了 ， 但 在 遍历 
之 前 先进 行 一 些 测试 。 我 们 知道 在 这 份 文档 里 有 一 些 缩 略 语 ， 


但 并 非 所 有 的 文档 都 这 样 。 如 果 想 让 这 个 函数 还 能 适用 于 其 他 
文档 ， 就 应 该 先 去 检查 一 下 当前 文档 是 不 是 包含 有 缩 略 语 ， 再 
决定 要 不 要 走 下 一 步 。 


查询 一 下 abbreviations 数组 的 length 属性 ， 我 们 惑 能 知道 
这 个 文档 里 有 多 少 个 缩 上 略语 。 如 果 abbreviations.length 
小 于 1， 就 说 明 这 个 文档 里 没有 缩 略 语 。 如 果真 是 这 样 ， 这 个 
函数 束 应 该 立刻 停止 执行 并 返回 一 个 布尔 值 false : 











if (abbreviations.length < 1) return false; 





如 果 文 档 里 没有 abbr 元 系 ， 这 个 函数 将 就 此 结束 。 


下 一 步 是 获取 并 保存 每 个 abbr 元 素 提 供 的 信息 。 我 们 需要 得 
到 每 个 <cabbr> 标签 包含 的 文本 及 其 title 属性 的 值 。 当 你 需 
要 把 像 这 样 的 一 系列 数据 保存 起 来 时 ， 数 组 是 理想 的 存储 媒 
介 。 定 义 一 个 名 为 defs 的 新 数组 : 


var defs = new Array(); 





现在 开始 遍历 abbreviations 数组 : 


for (var i20; i«abbreviations.length; i++) { 





为 了 得 到 当前 缩 略 语 的 解释 文字 ， 用 getAttribute() 方法 得 
f| title 属性 的 值 ， 并 把 值 保存 到 变量 definition Æ: 


var definition = abbreviations[i].getAttribute("title"); 





要 得 到 <abbr> 标签 包含 的 缩 略语 文本 需要 nodeValue 属性 。 
实际 上 是 需要 拿 到 abbr 元 素 里 的 文本 节点 的 值 。 

在 explanation.html 文档 中 的 每 个 abbr TRE, LETA 
都 是 这 个 元 素 内 部 的 第 一 个 〈 也 是 仅 有 的 一 个 ) du. MA 
说 ， 这 个 文本 节点 是 abbr 元 素 节点 的 第 一 个 子 节点 : 








abbreviations[i].firstChild 











下 面 这 条 语句 得 到 这 个 文本 节点 的 nodeValue 属性 并 把 它 赋 值 
给 变量 key ; : 


var key = abbreviations[i].lastChild.nodeValue; 











现在 有 两 个 变量 了 : definition 和 key 。 这 两 个 变量 的 值 就 
是 我 想 保存 到 defs 数组 里 的 内 容 。 我 们 通过 把 其 中 之 一 用 作 
数组 元 素 的 下 标 ( 键 )， 男 一 个 用 作 数 组 元 素 的 值 的 方式 来 同 
时 保存 这 两 个 值 : 


defs[key] = definition; 








defs 数组 中 的 第 一 个 元 素 的 下 标 是 N3C ， 值 是 Nor1d Wide 





Web Consortium; defs 数组 中 的 第 二 个 元 素 的 下 标 是 DOM 
， 值 是 Document Object Model ， 依 次 类 推 。 


下 面 是 这 个 for 循环 的 完整 代码 : 





for (var i20; i«abbreviations.length; i++) { 
var definition = abbreviations[i].getAttribute("title"); 
var key = abbreviations[i].lastChild.nodeValue; 
defs[key] = definition; 

} 


MEN 


为 提高 这 个 循环 的 可 读 性 ， 建 议 你 把 abbreviations[i] 的 值 
你 在 本 次 循环 里 正在 被 遍历 的 那个 abbreviations 数组 
元 素 一 赋 给 一 个 名 为 current_abbr 的 变量 : 








for (var i20; i«abbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
var definition - current abbr.getAttribute("title"); 
var key = current abbr.lastChild.nodeValue; 


defs[key] = definition; 





如 果 你 觉得 current_abbr 变量 可 以 帮助 你 更 好 地 理解 这 段 代 
码 ， 那 就 把 它 留 在 那里 好 了 。 额 外 增加 一 条 这 样 的 语句 只 是 一 
个 非常 小 的 开销 。 


从 理论 上 讲 ， 你 完全 可 以 把 整个 循环 体 写 成 一 条 语句 ， 但 那 会 
让 代码 非常 难以 阅读 : 


for (var i20; i«abbreviations.length; i++) { 
defs[abbreviations[i].lastChild.nodeValue] = abbreviations[i].g 








在 编写 JavaScript 代 码 时 ， 许 多 操作 都 有 多 种 实现 办 法 。 就 合 上 

面 这 个 for 循环 来 说 ， 你 已 经 看 到 了 三 种 不 同 的 写法 。 选 出 一 

种 最 适合 你 的 写法 用 在 你 的 脚本 里 。 如 果 在 编写 茶 些 代码 时 你 

ea 等 日 后 再 去 阅读 它们 的 时 候 束 会 更 加 
难 。 


现在 ， 我 己 经 把 那些 缩 略语 及 其 解释 保存 到 了 defs 数组 里 。 
接 下 来 我 们 要 创建 标记 以 便 把 这 些 内 容 显示 在 页 面 上 。 


8.4.2 ”创建 标记 


定义 列表 是 表现 缩 略 语 及 其 解释 的 理想 结构 。 定 义 列表 (<dl> 
) oot “定义 标题 *”(<dt> ) 和 相应 的 “定义 描述 ”(<dd> 
) 构成 : 





«dl» 
<dt>Title 1«/dt» 
«dd»Description 1</dd> 
«dt»Title 2«/dt» 


«dd»Description 2«/dd» 
</dl> 





FacreateElement 方法 创建 这 个 定义 列表 ， 并 把 这 个 新 创建 
的 元 素 赋值 给 变量 dl1ist : 


var dlist = document.createElement("dl"); 





由 上 面 这 条 语句 创建 出 来 的 dl 元 素 只 是 JavaScript 世 界 里 的 一 
个 孜 儿 。 稍 后 我 们 将 通过 它 的 引用 ， 也 束 是 dlist 变量 ， 把 它 
添加 到 explanation.html 文档 中 。 





现在 需要 再 编写 一 个 循环 ， 对 刚刚 创建 的 defs 数组 进行 过 
历 。 这 次 我 们 还 是 使 用 for 循环 ， 不 过 这 次 与 前 面 编写 的 那 
个 for 循环 有 点 儿 不 一 样 。 你 可 以 利用 一 个 for/in 循环 把 东 
个 数组 的 下 标 键 临时 赋值 给 一 个 变量 : 





for (variable in array) 





在 进入 第 一 次 循环 时 ， 变 量 variable 将 被 赋值 为 数组 array 
的 第 一 个 元 素 的 下 标 值 ， 在 进入 第 二 次 循环 时 ， 变 量 


variable 将 被 赋值 为 数组 array 的 第 二 个 元 素 的 下 标 值 ， 依 
次 类 推 ， 直 到 遍历 完 数组 array 里 的 所 有 元 素 为 止 。 这 就 是 我 
们 遍历 关联 数组 defs 的 方式 : 


for (key in defs) { 


上 面 这 行 代码 的 含义 是 “对 于 defs 关联 数组 里 的 每 个 键 ， 把 它 
的 值 赋 给 变量 key ”。 在 接 下 来 的 循环 体 部 分 ， 变 量 key 可 以 
像 其 他 变量 那样 使 用 。 具 体 到 这 个 例子 ， 因 为 变量 key 的 值 是 
Mr E 所 以 可 以 利用 它 得 到 相应 的 数 
HITA : H 


var definition - defs[key]; 


在 这 个 for/in 循环 的 第 一 次 循环 里 ， 变 量 key 的 值 是 N3C , 
变量 definition 的 值 是 World Wide Web Consortium; 在 
第 二 次 循环 里 ， 变 量 key 的 值 是 DOM ， 变 量 definition 的 值 
是 Document Object Model . 

每 次 循环 都 需要 创建 一 个 dt 元 素 和 一 个 dd 元 素 。 我 们 还 需要 
S UON 点 并 把 它们 分 别 添加 到 新 创建 的 dt 和 dd 元 


先 创建 dt TH: 


var dtitle = document.createElement("dt"); 


然后 用 变量 key 的 值 去 创建 一 个 文本 节点 : 


var dtitle text = document.createTextNode(key); 


pO 


我 们 已 经 创建 了 两 个 节点 。 新 创建 的 元 素 节 点 被 赋值 给 变量 
dtitle 。 把 新 创建 的 文本 节点 赋值 给 变量 dtitle_text 。 使 
用 appendChild() 方法 把 dtitle_text 文本 节点 添加 

到 dtitle 元 素 节 点 : 


dtitle.appendChild(dtitle text); 





重复 这 个 过 程 创 建 dd 7038: 


var ddesc = document.createElement("dd"); 





这 次 用 变量 definition 的 值 创 建 一 个 文本 节点 : 


var ddesc text = document.createTextNode(definition) ; 








再 一 次 把 文本 市 点 添加 到 元 系 市 反 : 


ddesc.appendChild(ddesc text); 








现在 ， 我 们 有 了 两 个 元 素 节 点 : dtitle 和 ddesc 。 这 两 个 元 





素 节 点 分 别 包含 文本 节点 dtitle text 和 ddesc text 。 


在 结束 循环 之 前 ， 接 着 把 新 创建 的 dt 和 dd 元 素 追 加 到 稍 早 创 
建 的 dl 元 素 上 。 一 一 这 个 dl 元 素 已 经 被 赋 给 了 变量 dlist : 


dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 





下 面 是 这 个 for/in 循环 的 完整 代码 : 


for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key) ; 
dtitle.appendChild(dtitle text); 
var ddesc = document.createElement("dd") ; 
var ddesc_text = document.createTextNode(definition) ; 
ddesc.appendChild(ddesc_text); 
dlist.appendChild(dtitle) ; 
dlist.appendChild(ddesc); 





到 了 这 个 阶段 ， 我 们 的 定义 列表 就 完成 了 。 它 作为 一 
个 DocumentFragment 对 象 已 经 存在 于 JavaScript 上 下 文 里 。 
接 下 来 的 工作 是 把 它 插入 到 文档 中 去 。 

i， 插 入 这 个 定义 列表 


与 其 把 这 个 定义 列表 突 元 地 插入 文档 ， 不 如 给 它 加 上 一 个 
描述 性 标题 ， 这 样 应 该 会 有 更 好 的 效果 。 


先 创 建 一 个 h2 元 素 节 点 : 











var header = document.createElement("h2"); 





再 创建 一 个 内 容 为 Abbreviations 的 文本 节点 : 


var header text = document.createTextNode("Abbreviations"); 


ed 


然后 把 文本 市 反 添 加 到 h2 763878 KA: 





header.appendChild(header text); 


对 于 结构 比较 复杂 的 文档 ， 或 许 还 需要 借助 于 特定 的 id 
才能 把 新 创建 的 元 素 插入 到 文档 里 的 特定 位 置 。 因 
er A html 文档 的 结构 并 不 复杂 ， 所 以 只 要 
把 新 创建 的 元 素 退 加 到 body 标签 上 即 可 。 


引用 body 标签 的 具体 做 法 有 两 种 。 第 一 种 是 使 用 DOM 
Core， 即 引用 某 给 定 文 档 的 第 一 个 〈 也 是 仅 有 的 一 
个 ) body 标签: 





document. getElementsByTagName("body")[@] 


第 二 种 做 法 是 使 用 HTMI- DOM， 即 引用 某 给 定 文档 的 
body 属性 


document .body 


Boc. di A HR TE SE" d: 


document .body.appendChild(header); 














PRR, TEAS SAMS TERR” AS 


document. body.appendChild(dlist) ; 





displayAbbreviations() 函数 终于 全 部 完成 : 


function displayAbbreviations() { 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
for (var i=@; i<abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.lastChild.nodeValue; 
defs[key] = definition; 
} 
var dlist = document.createElement("d1"); 
for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key) ; 


dtitle.appendChild(dtitle text); 

var ddesc = document.createElement("dd"); 

var ddesc_text = document.createTextNode(definition) ; 
ddesc.appendChild(ddesc_text); 
dlist.appendChild(dtitle); 

dlist.appendChild(ddesc); 


} 


var header = document.createElement("h2") ; 

var header text = document.createTextNode("Abbreviations") 
header.appendChild(header text); 

document .body.appendChild(header); 

document .body.appendChild(dlist); 








样 ， 这 个 函数 还 有 不 少 需要 改进 的 余地 。 


>t 
E 
HH 
di 
| 





在 这 个 函数 的 开头 部 分 ， 应 该 安排 一 些 检查 以 确保 浏览 器 
能 够 理解 你 这 个 函数 里 用 到 的 那些 DOM 方 法 ， 这 个 函数 
用 到 了 getElementsByTagName 、createElement 和 

createTextNode 。 你 可 以 分 别 检查 这 几 个 方法 是 否 存 
在 : 


if (!document.getElementsByTagName) return false; 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 





当然 ， 也 可 以 把 这 几 项 测试 合并 为 一 条 语句 : 


if (!document.getElementsByTagName || !document.createElemen 
=|| !document.createTextNode) return false; 








| CX 你 可 以 根据 自己 的 个 人 习惯 选择 一 


displayAbbreviations 函数 有 点 长 ， 应 该 在 它 的 代码 
里 加 上 一 些 注释 。 








function displayAbbreviations() { 
if (!document.getElementsByTagName || !document.createEleme 
|| !document.createTextNode) return false; 

// 取得 所 有 缩 略 词 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 




















// 388 Dj 3X ES AER d] 
for (var i20; i«abbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
var definition - current abbr.getAttribute("title"); 
var key = current abbr.lastChild.nodeValue; 
defs[key] = definition; 








} 
// 创建 定义 列表 


var dlist = document.createElement("d1"); 





// WE 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key) ; 
dtitle.appendChild(dtitle text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 




















j 
// 创建 标题 
var header = document.createElement("h2"); 
var header text = document.createTextNode("Abbreviations") 
header.appendChild(header text); 
// 把 标题 添加 到 页 面 主体 
document .body.appendChild(header); 
// 把 定义 列表 添加 到 页 面 主体 




















document.body.appendChild(dlist); 
j 





这 个 函数 应 该 在 页 面 加 载 时 被 调用 。 你 可 以 通过 
window. onload 事件 来 做 到 这 一 点 : 


window.onload = displayAbbreviations; 





为 了 日 后 能 够 方便 地 把 多 个 事件 添加 到 window.onload 
处 理 函 数 上 ， 最 好 使 用 addLoadEvent 函数 来 完成 这 一 工 
作 。 首 先 ， 编 写 addLoadEvent 函数 并 把 它 保存 为 一 个 新 
的 JavaScript 脚 本 文件 ， 将 新 文件 命名 
ZjaddLoadEvent.js 并 把 它 存 入 scripts XHK: 


function addLoadEvent(func) { 
var oldonload = window.onload; 


if (typeof window.onload != 'function') { 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 
func(); 








然后 ， 把 下 面 这 条 语句 添加 
fUdisplayAbbreviations.js 文件 里 : 


addLoadEvent(displayAbbreviations); 





现在 ，JavaScript 脚 本 文件 都 已 经 准备 好 了 。 接 下 来 ， 为 了 
调用 这 两 个 JavaScript 脚 本 文件 ， 我 们 需要 

在 explanation.html 文件 的 <head> 部 分 添加 一 些 
«script» in, WW PI: 


<script src-"scripts/addLoadEvent.js"»«/script» 
«script src-"scripts/displayAbbreviations.js"»«/script» 





注意 “请 确保 先 包 含 addLoadEvent.Jjs ， 





AdisplayAbbreviations.js 依赖 于 它 。 在 真实 项 
目 中 ， 你 通常 还 需要 压强 脚本 ， 并 把 它们 合并 成 一 个 
文件 〈 如 第 5 章 所 示 ) 。 对 我 们 的 例子 来 说 ， 保 持 多 
oe 文件 和 较 多 的 元 余 空白 有 助 于 大 家 理解 
1 试验。 


ii. 最 终 的 标记 











下 面 是 最 终 完 成 的 explanation.html 文件 : 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
<link rel="stylesheet" media="screen" 
w»href="styles/typography.css" /> 
</head> 
<body> 
«hi»What is the Document Object Model?</h1> 
<p> 
The «abbr title-"World Wide Web Consortium" >W3C</abbr> defing 
=the «abbr title-"Document Object Model">DOM</abbr> as: 
</p> 
«blockquote cite="http://www.w3.org/DOM/"> 
<p> 
A platform- and language-neutral interface that will allow p 
wand scripts to dynamically access and update the 
content, structure and style of documents. 
«/p» 
«/blockquote» 
«p» 
It is an «abbr title-"Application Programming Interface">API 
that can be used to navigate «abbr title="HyperText Markup 
wHTML«/abbr» and «abbr title-"eXtensible Markup Language"»X 
«/abbr» documents. 
«/p» 
<script src-"scripts/addLoadEvent.js"»«/script» 
<script src="scripts/displayAbbreviations.js"></script> 
</body> 
</html> 





现在 ， 把 explanation.html 文件 加 载 到 Web 浏 览 器 里 就 
可 以 看 到 displayAbbreviations 函数 的 效果 了 ， 如 图 8- 
3 所 示 。 


TARA Explaining the Document Object Model co 
PN A vio 7 
ww LE E 


What is the Document Object Model? 


The W3C defines the DOM as: 


A platform- and language-neutral interface that will allow a che and scripts to dynamically 
access and update the content, structure and style of documents 





It is an API that can be used to navigate HTML and XML documents. 
Abbreviations 

World Wide Web Consortium 

Document Object Model 

Application Programming Interface 


HyperText Markup Language 
eXtensible Markup Language 


Done 


图 8-3 
8.4.3 一 个 浏览 器 “地 雷 ” 


在 此 以 前 ， 我 一 直人 避免 提 到 任何 特定 的 浏览 器 。 只 要 使 用 
的 浏览 器 支持 DOM， 则 此 前 见 到 过 的 脚本 就 都 可 以 正常 
工作 。 可 是 ， 这 个 displayAbbreviations 函数 却 是 一 
个 例外 。 


displayAbbreviations 函数 工作 得 确实 不 错 ， 除 非 你 
使 用 的 浏览 右 是 IE6 或 更 早 的 Windows 厂 本 。 如 宋 把 
explanation.html 文件 加 载 到 下 浏览 右 里 ， 不 仅 不 会 看 
还 极 有 可 能 会 看 到 一 条 JavaScript 出 
B YH so 


你 肯定 会 对 这 种 行为 感到 不 解 : 我 们 已 经 

在 displayAbbreviations 函数 的 开头 部 分 加 上 了 对 象 
探测 语句 ， 以 确保 只 有 文 持 DOM 的 浏览 器 才 会 去 执行 
DOM 代 码 ，IE 浏 览 器 对 getElementsByTagName 和 
getElementById 方法 的 文 持 也 毋庸 置疑 ， 为 什么 还 会 出 
现 这 样 的 问题 呢 ? 








事情 还 要 从 本 书 第 1 章 里 提 到 的 浏览 器 大 战 说 起 。 在 那 场 
大 战 中 ， 网 景 公司 和 微软 公司 曾 把 cabbr> 和 <acronym> 
标签 当做 它们 的 武器 之 一 。 在 元 争 最 激烈 时 ， 微 软 决 定 不 
在 自己 的 浏览 器 里 实现 abbr 7638 « 


那 场 浏 览 器 大 战 早 已 烟消云散 ， 最 终 的 结果 是 微软 打败 了 
网 景 ， 但 微软 的 下 浏览 器 直到 IE7 才 支持 abbr 元 

素 。displayAbbreviations 函数 在 早期 版 本 中 失败 ， 
是 因为 它 试图 从 一 些 abbr 元 对 节 点 那里 提取 属性 节点 和 
而 下 浏览 器 却 拒 绝 承 认 那 些 abbr 市 点 的 “元 

素 ” 地 位 。 


我 们 意外 地 踏 上 了 一 颗 在 一 场 早已 结束 的 战争 中 埋藏 下 来 
的 “地 雷 ”! 


可 供 选 择 的 解决 方 采 有 三 种 。 


e 把 abbr TRA Hi Nacronym 元 素 。 我 对 这 种 解 
决 方案 不 感 兴趣 ， 因 为 我 不 想 为 了 迁就 一 种 项 固 不 化 
的 浏览 器 而 “牺牲 > 一 大 批语 义 正 确 的 标记 。 

。 在 元 素 中 使 用 html 命名 空间 
(<html:abbr>abbr</html:abbr> ) ， 这 样 下 就 可 

以 认 出 这 些 元 素 。 这 个 方案 涉及 修改 标记 ， 如 果 要 在 

其 他 的 文档 中 使 用 displayAbbreviations 函数 ， 

问题 仍 得 不 到 解决 。 

保证 displayAbbreviations AXIE t fe FKE 

化 。 这 个 方案 实现 起 来 最 简单 ， 也 最 容易 被 人 接受 。 

只 要 多 写 几 行 代码 ，IE (或 其 他 不 能 识别 abbr 元 素 

的 浏览 器 ) 就 可 以 提前 退出 。 


所 以 ， 我 们 选用 第 三 种 。 


Bt, fect Mabbr 元 素 提 取 title 属性 值 和 文本 值 的 
for 循环 里 添加 一 条 语句 : 











for (var i20; i«abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 
if (current_abbr.childNodes.length < 1) continue; 
var definition = current abbr.getAttribute("title"); 


var key = current abbr.lastChild.nodeValue; 


defs[key] = definition; 
} 











AS AN a XE: “WR SACRA do o Bi 
立刻 开始 下 一 次 循环 ”"。 因 为 IE 浏 览 器 在 统计 abbr 元 素 的 
子 节点 个 数 时 总 是 会 返回 一 个 错误 的 值 一 一 零 ， 所 以 这 条 
新 语句 会 让 下 浏览 器 不 再 继续 执行 这 个 循环 中 的 后 续 代 
码 。 


当 IE 浏 览 器 执行 到 displayAbbreviations raat fv 
建 “ 缩 略语 列表 ”的 那个 for 循环 时 ， 因 为 defs 数组 是 空 
的 ， 所 以 它 将 不 会 创建 出 任何 dt 和 dd 元 素 。 我 们 在 那 

个 for 循环 的 后 面 添 加 这 样 一 条 语句 : 如 果 对 应 于 “ 缩 略 
语 列 表 ” 的 那个 dl 元素 没有 任何 子 节点 ， 则 立刻 退出 
displayAbbreviations 函数 : 

















// 创建 定义 列表 
var dlist = document.createElement("dl"); 
// WREX 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key) ; 
dtitle.appendChild(dtitle text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd") ; 
var ddesc_text = document.createTextNode(definition) ; 
ddesc.appendChild(ddesc_text); 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle) ; 
dlist.appendChild(ddesc); 























if (dlist.childNodes.length « 1) return false; 





请 注意 ， 新 添加 的 这 条 if 语句 义 一 次 违背 了 结构 化 程序 





设计 原则 一 个 函数 应 该 只 有 一 个 入 口 和 一 个 出 口 》 
它 等 于 是 在 函数 的 中 间 增 加 了 一 个 出 口 点 。 但 这 应 该 是 既 
可 以 解决 正 浏 览 器 的 问题 ， 又 不 需要 对 现 有 的 函数 代码 大 
动 干戈 的 最 简单 的 办 法 了 。 


下 面 是 改进 函数 之 后 的 代码 清单 : 














function displayAbbreviations() { 
if (!document.getElementsByTagName || !document.createElem 
=|| !document.createTextNode) return false; 
// 取得 所 有 缩 略 词 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 











// 遍历 所 有 缩 略 词 
for (var i=0; i«abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 
if (current_abbr.childNodes.length < 1) continue; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.lastChild.nodeValue; 
defs[key] = definition; 














} 
// 创建 定义 列表 
var dlist = document.createElement("d1"); 
// loop through the definitions 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key) ; 
dtitle.appendChild(dtitle text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 
I 
if (dlist.childNodes.length « 1) return false; 
// 创建 标题 
var header = document.createElement("h2"); 
var header text = document.createTextNode("Abbreviations") 
header.appendChild(header text); 
// 把 标题 添加 到 页 面 主体 
document .body.appendChild(header) ; 


























// 把 定义 列表 添加 到 页 面 主体 
document.body.appendChild(dlist) ; 
} 














这 两 条 新 语句 将 确保 explanation.html 文档 就 算 遇 到 那 
些 不 理解 abbr 元 素 的 浏览 占 也 不 会 出 问题 。 它 们 就 像 是 
nn 
Uu. 


注意 “即使 某 种 特定 的 浏览 器 会 引起 问题 ， 也 没有 
必要 使 用 浏览 器 嗅 探 代码 。 对 浏览 器 的 名 称 和 版 本 号 
进行 嗅 探 的 办 法 很 难 做 到 面面俱到 ， 而 且 往 往 会 导致 
非常 复杂 难 解 的 代码 。 


我 们 已经 成 功 地 排除 了 一 颗 在 过 去 的 浏览 硕大 成 中 遗留 下 
来 的 “地 雷 ”。 如 果 有 什么 教训 的 话 ， 那 就 是 它 可 以 让 我 们 
深刻 地 体会 到 标准 的 重要 性 。 仅 仅 因 为 下 浏览 器 不 文 

持 abbr 元 素 ， 就 使 得 一 大 批 用 户 没 有 机 会 看 到 一 个 目 动 
生成 的 “ 缩 略语 列表 ”， 这 个 事实 让 我 感到 很 遗憾 ， 但 这 些 
用 户 仍 能 看 到 页 面 上 的 核心 内 容 。 缩 略语 列表 是 一 种 很 好 
的 增强 补充 ， 它 还 算 不 上 是 页 面 必 不 可 少 的 组 成 部 分 。 如 
果 它 真 的 必 不 可 少 ， 从 一 开始 束 应 该 把 它 包括 在 标记 里 。 








8.5 ”显示 “文献 来 源 链接 表 ” 


displayAbbreviations 函数 是 一 个 充实 文档 内 容 的 好 
例子 〈 至 少 对 那些 不 是 正 的 浏览 器 来 说 是 如 此 ) 。 它 从 文 
档 结 构 提 取出 了 一 些 内 容 并 以 一 种 清晰 的 方式 显示 出 来 。 
那些 原本 包含 在 abbr 标签 的 title 属性 里 的 信息 现在 直 
接 呈 现在 了 浏览 器 窗口 里 。 现 在 ， 我 们 来 看 男 一 个 增强 文 
pea 。 请 大 家 仔细 看 explanation.html 文档 中 的 这 
APR: 


«blockquote cite="http://www.w3.org/DOM/"> 

<p> 
A platform- and language-neutral interface that will allow p 
wand scripts to dynamically access and update the 
content, structure and style of documents. 


</p> 
</blockquote> 





blockquote 元 系 包 含 一 个 属性 cite 。 这 是 一 个 可 选 属 

性 ， 你 可 以 给 它 一 个 URL 地 址 ， 告 诉 人 们 blockquote 元 
素 的 内 容 引 自 哪 里 。 从 理论 上 讲 ， 这 是 一 个 把 文献 资料 与 
相关 网 页 链接 起 来 的 好 办 法 ; 但 在 实践 中 ， 浏 览 器 会 完全 
忽视 cite 属性 的 存在 。 虽 然 信 息 就 在 那里 ， 但 用 户 却 无 
法 看 到 它们 。 利 用 JavaScript 语 言 和 DOM， 我 们 完全 可 以 
把 那些 信息 收集 起 来 ， 并 以 一 种 更 有 意义 的 方式 把 它们 显 
示 在 网 页 上 。 


我 们 计划 按照 以 下 步骤 将 文献 以 链接 形式 显示 出 来 。 
(1) 裔 历 这 个 文档 里 所 有 blockquote 元 素 。 

(2) 从 blockquote 元 素 提 取出 cite 属性 的 值 。 

(3) 创建 一 个 标识 文本 是 source 的 链接 。 





(4) 把 这 个 链接 赋值 为 blockquote 元 素 的 cite 属性 值 。 
(5) 把 这 个 链接 插入 到 文献 节选 的 末尾 。 


和 显示 缩 略语 列表 一 样 ， 我 们 将 根据 上 述 步骤 编号 一 个 
JavaScript AŽ. 


编写 displayCitations 函数 


我 们 将 新 函数 命名 为 displayCitations ， 将 它 保存 
fEdisplayCitations.js 文件 中 。 


首先 ， 因 为 它 不 需要 任何 参数 ， 所 以 函数 名 后 面 的 圆 括 号 


将 是 空 的 : 


function displayCitations() { 





一 步 是 把 文档 里 的 所 有 blockquote 元 素 找 出 来 。 使 
用 getElementsByTagName 方法 完成 这 项 查找 工作 ， 并 
把 找到 的 节点 集合 保存 为 变量 quotes : 





var quotes = document.getElementsByTagName("blockquote"); 


for (var i=@; i«quotes.length; i ++) { 





在 这 个 循环 里 ， 我 们 只 对 有 cite 属性 的 文献 节选 感 兴 
趣 。 我 们 用 一 个 简单 的 测试 检查 本 次 循环 中 的 当前 文献 节 
选 有 没有 这 个 属性 。 





用 getAttribute 方法 测试 节点 集合 quotes 中 的 当前 元 
素 ( 即 quotes[i] ) ， 如 果 getAttribute("cite") 的 

结果 为 真 ， 就 说 明 这 个 节点 有 cite 属性 ;如 

果 !getAttribute("cite") 的 结果 为 真 ， 就 说 明 这 个 节 
点 没有 cite 属性 。 如 果 是 后 一 种 情况 ， 使 用 continue v. 
刻 跳 到 下 一 次 循环 ， 不 再 继续 执行 本 次 循环 中 的 后 续 语 


fj: 








if (!quotes[i].getAttribute("cite")) { 
continue; 


} 





也 可 以 把 这 条 语句 写成 下 面 这 样 : 


if (!quotes[i].getAttribute("cite")) continue; 





接 下 来 的 语句 将 只 有 当前 blockquote 元 素 有 cite 属性 的 
情况 下 才 会 执行 。 


首先 ， 得 到 当前 blockquote 元 素 的 cite 属性 值 并 把 它 存 
入 变量 ur1 : 


var url - quotes[i].getAttribute("cite"); 





下 一 步 是 确定 应 该 把 “文献 来 源 链 接 ” 放 到 何 处 。 这 似乎 是 
一 项 非常 简单 的 任务 。 


a. 碍 找 你 的 元 系 


一 个 blockquote 元 素 必定 包含 块 级 元 系 ， 如 文本 段 
落 ， 以 容纳 被 引用 的 大 段 文本 。 我 们 想 把 “文献 来 源 





链接 ” 放 在 blockquote 元 素 所 包含 的 最 后 一 个 子 元 素 
节点 之 后 。 显 然 我 们 应 该 先 找 到 当前 blockquote 元 
AWlastchild 属性 : 


quotes[i].lastChild 





可 是 ， 这 样 我 们 就 会 遇 到 一 个 问题 。 请 大 家 再 仔细 看 
看 这 段 标记 : 


«blockquote cite="http://www.w3.org/DOM/"> 

<p> 
A platform- and language-neutral interface that will al 
wand scripts to dynamically access and update the 
content, structure and style of documents. 


</p> 
</blockquote> 








乍 看 起 来 ，blockquote 元 素 的 最 后 一 个 子 节点 应 该 
是 那个 p 元 素 ， 而 这 意味 着 lastChild 属性 的 返回 值 
将 是 一 个 p 元 素 节 点 。 可 是 ， 事 实 却 并 不 一 定 如 此 。 


那个 p 节点 的 确 是 blockquote 元 素 的 最 后 一 个 元 素 
节点 。 但 在 </p> 标签 和 </blockquote> 标签 之 间 还 
存在 着 一 个 换行 符 。 有 些 浏览 器 会 把 这 个 换行 符 解 释 
为 一 个 文本 节点 。 这 样 一 来 ，blockquote TATA 
的 lastChild 属性 就 将 是 一 个 文本 市 点 而 不 是 那个 p 
JUR Ti Rd o 


注意 ”在 编写 DOM 脚 本 时 ， 你 会 想当然 地 认为 

某 个 节点 肯定 是 一 个 元 素 节 点 ， 这 是 一 种 相当 常 

见 的 错误 。 如 果 没 有 百分之百 的 把 握 ， 就 一 定 要 

去 检查 nodeType 属性 值 。 有 很 多 DOM 方 法 只 能 

如 果 用 在 了 文本 节点 身上 ， 就 会 
H o 




















DOM 己 经 提供 了 一 个 非常 有 用 的 lastChild 属性 ， 
如 果 它 能 再 为 我 们 提供 一 个 lastChildElement 属性 
就 更 好 了 。 但 令 人 遗憾 的 是 它 没 有 。 还 好 ， 你 可 以 利 
人 的 DOM 方 法 和 属性 编写 一 些 语句 ， 完 成 这 项 
EF 。 


你 可 以 把 包含 在 当前 blockquote 元 素 里 的 所 有 元 素 
节点 找 出 来 。 如 果 把 通配符 “* ”作为 参数 传递 给 
getElementsByTagName 方法 ， 它 就 会 把 所 有 的 元 
素 ， 不 管 标签 名 是 什么 ， 一 一 返回 给 我 们 : 








var quoteElements = quotes[i].getElementsByTagName("*") 





变量 quoteElements 是 一 个 数组 ， 它 包含 当 
前 blockquote 元 素 CHlquotes[i] ) 所 包含 的 全 体 
JU s 


MÆ, blockquote 762& PT ELT Wa — 1 7638. TNA 
将 对 应 着 quoteElements 数组 中 的 最 后 一 个 元 素 。 
数组 中 的 最 后 一 个 元 素 的 下 标 等 于 数组 的 长 度 减 去 
1， 因 为 数组 的 下 标 从 零 开 始 。 记 住 ， 数 组 中 的 最 后 
a 下 标 不 等 于 数组 的 长 度 ， 而 是 数组 的 长 度 
MAEL: 














var elem = quoteElements[quoteElements.length - 1]; 





现在 ， 变 量 elem 对 应 blockquote 元 素 所 包含 的 最 后 
一 个 元 素 节 点 。 


回 到 我 们 正在 displayCitations 函数 里 编写 的 那个 
循环 ， 下 面 是 已 经 写 出 来 的 代码 : 


for (var i=@; i<quotes.length; i++) { 





if (!quotes[i].getAttribute("cite")) continue; 

var url = quotes[i].getAttribute("cite"); 

var quoteChildren = quotes[i].getElementsByTagName( '* 
var elem - quoteChildren[quoteChildren.length - 1]; 





与 其 假设 quoteChildren 变量 肯定 返回 一 个 元 素 节 

点 数组 ， 不 如 增加 一 项 测试 来 检查 它 的 长 度 是 否 小 于 
1。 如 果 是 ， 就 用 关键 字 continue 立刻 退出 本 次 循 

I: 





for (var i20; i«quotes.length; i++) { 
if (!quotes[i].getAttribute("cite")) continue; 
var url = quotes[i].getAttribute("cite"); 
var quoteChildren = quotes[i].getElementsByTagName( '* 
if (quoteChildren.length « 1) continue; 
var elem - quoteChildren[quoteChildren.length - 1]; 








我 们 已 经 把 创建 一 个 链接 所 需要 的 东西 全 准备 好 了 。 
变量 url 包含 着 将 成 为 那个 链接 的 href 属性 值 的 字 
符 串 ，elem 变量 包含 着 将 成 为 那个 链接 在 文档 中 的 
插入 位 置 的 节点 。 

. 创建 链接 

用 createElement 方法 创建 一 个 “链接 ”元 素 : 


var link = document.createElement("a"); 





接 下 来 ， 为 那个 新 链接 创建 一 条 标识 文本 。 
用 createTextNode 方法 创建 一 个 内 容 为 source 的 
文本 节点 : 





var link text = document.createTextNode("source"); 


现在 ， 变 量 Link 包含 新 创建 的 a 元 素 ， 变 量 
link text 包含 着 新 创建 的 文本 节点 。 


用 appendChild 方法 把 新 的 文本 节点 插入 新 链接 : 


link.appendChild(link text); 


把 href 属性 添加 给 新 链接 。 用 setAttribute 方法 
把 它 设置 为 变量 url 的 值 : 


link.setAttribute("href",ur1l); 








新 链接 已 经 创建 好 了 ， 可 以 插入 文档 中 了 。 

.插入 链接 

你 可 以 就 这 样 把 它 播 入 文档 ， 也 可 以 先 用 另 一 个 元 
素 ， 比 如 sup 元 素 ， 包 装 它 ， 使 它 在 浏览 器 里 呈现 出 
上 标的 效果 。 


创建 一 个 sup 元 素 节点 并 把 它 存 入 变量 superscript 


var superscript = document.createElement("sup"); 





把 新 链接 放 入 这 个 sup 元 素 : 


superscript.appendChild(link); 





现在 ， 有 了 一 个 存在 于 JavaScript 上 下 文中 的 
DocumentFragment 对 象 ， 它 此 时 尚未 被 插入 任何 文 
F5: 


«sup»«a href="http: //www.w3.org/DOM/">source</a></sup> 





为 了 把 这 个 标记 插入 文档 ， 你 要 把 变量 superscript 





iB JUAN elem 的 最 后 一 个 子 节 点 。 因 为 变量 elem 
对 应 着 blockquote 元 素 目前 所 包含 的 最 后 一 个 元 素 
节点 ， 这 个 上 标 形式 的 新 链接 将 出 现在 文献 节选 的 后 
Ift: 


elem.appendChild(superscript); 








最 后 ， 先 用 一 个 右 花 括号 结束 这 个 for 循环 ， 再 用 一 
个 石花 括号 结束 整个 函数 。 


下 面 是 displayCitations 函数 到 目前 为 止 的 代码 清 
TÉ. 





function displayCitations() { 
var quotes = document.getElementsByTagName("blockquot 
for (var i20; i«quotes.length; i++) { 
if (!quotes[i].getAttribute("cite")) continue; 
var url - quotes[i].getAttribute("cite"); 
var quoteChildren - quotes[i].getElementsByTagName( 
if (quoteChildren.length « 1) continue; 
var elem - quoteChildren[quoteChildren.length - 1]; 
var link = document.createElement("a"); 
var link text = document.createTextNode("source"); 


link.appendChild(link text); 
link.setAttribute("href",url); 

var superscript - document.createElement("sup"); 
superscript.appendChild(link); 
elem.appendChild(superscript); 





6. 改进 脚本 


依照 惯例 ， 总 是 会 有 需要 改进 的 地 方 。 在 这 个 函数 的 
开头 部 分 增加 一 些 测 试 ， 以 确保 浏览 器 能 够 理解 这 个 
函数 里 用 到 的 DOM 方 法 。 为 了 让 代码 更 易于 理解 ， 
你 还 应 该 加 上 一 些 注释 : 











function displayCitations() { 
if (!document.getElementsByTagName || !document.creat 
=|| !document.createTextNode) return false; 


// 取得 所 有 引用 
var quotes = document.getElementsByTagName("blockquot 


























// ŒH 
for (var i=@; i<quotes.length; i++) { 
// 如 果 没 有 cite 属性 ， 继 续 循 环 
if (!quotes[i]. continue; 
// 保存 cite 属性 
var url = quotes[i].getAttribute("cite"); 
// 取得 引用 中 的 所 有 元 素 节 点 
var quoteChildren = quotes[i].getElementsByTagName( 
// 如 果 没 有 元 素 节 点 ， 继 续 循环 
if (quoteChildren.length < 1) continue; 
// 取得 引用 中 的 最 后 一 个 元 素 节点 
var elem = quoteChildren[quoteChildren.length - 1]; 
// 创建 标记 
var link = document.createElement("a"); 
var link_text = document.createTextNode("source"); 
link.appendChild(link text); 
link.setAttribute("href",url); 
var superscript - document.createElement("sup"); 
superscript.appendChild(link); 
// 把 标记 添加 到 引用 中 的 最 后 一 个 元 素 节 点 
elem.appendChild(superscript); 
j 













































































用 addLoadEvent 函数 调用 displayCitations PK 
数 : 


addLoadEvent(displayCitations); 





最 终 的 标记 


为 了 调用 displayCitations.js 文件 ， 还 需要 在 文 
档 末 尾 添 加 一 组 <script> 标签 : 


«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /» 
<title>Explaining the Document Object Model</title> 
<link rel="stylesheet" media-"screen" 
=»href="styles/typography.css" /> 
</head> 
<body> 
«hi»What is the Document Object Model?</h1> 
<p> 
The «abbr title-"World Wide Web Consortium" >W3C</abbr> 
=the «abbr title-"Document Object Model">DOM</abbr> as: 


«/p» 
«blockquote cite="http://www.w3.org/DOM/"> 


«p» 
A platform- and language-neutral interface that will al 
wand scripts to dynamically access and update the 
content, structure and style of documents. 
«/p» 

«/blockquote» 

«p» 
It is an «abbr title-"Application Programming Interface' 
that can be used to navigate «abbr title-"HyperText M 
wHTML</abbr> and «abbr title-"eXtensible Markup Langua 
wec/abbr» documents. 





</p> 
«script src="scripts/addLoadEvent.js"></script> 
«script src="scripts/displayAbbreviations.js"></scr 
«script src="scripts/displayCitations.js"></script> 
</body> 
</html> 





现在 ， 把 explanation.html 文件 加 载 到 一 个 web 浏 
览 器 里 就 可 以 看 到 效果 了 ， 如 图 8-4 所 示 。 


TARA Explaining the Document Object Model e» 


& x] f 0 vO # 
What is the Document Object Model? 


The W3C defines the DOM as: 





A platform- and language-neutral interface that will allow programs and d to dynamically 
access and update the content, structure and style of documents. 22uce 


It is an API that can be used to navigate HTML and XML documents. 
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8.6 ”显示 “快捷 键 清单 ” 


此 前 编写 的 displayAbbreviations 和 
displayCitations 函数 有 许多 共同 之 处 : 从 创建 一 
个 由 特定 元 素 (abbr 元 素 或 blockquote TR) 构成 
的 节点 集合 开始 ， 用 一 个 循环 去 授 历 这 个 而 点 集合 并 
在 每 次 循环 里 创建 出 一 些 标记 ， 最 后 把 新 创建 的 标记 
插入 到 文档 里 。 


让 我 们 沿 厦 这 一 思路 再 看 一 个 例子 。 我 们 编写 一 个 函 
数 、 把 文档 里 能 用 到 的 所 有 快捷 键 显示 在 页 面 里 。 


accesskey 属性 可 以 把 一 个 元 素 〈 如 链接 ) 与 键盘 上 
的 某 个 特定 按键 关联 在 一 起 。 这 对 那些 不 能 或 不 喜欢 
使 用 鼠标 来 浏览 网 页 的 人 们 很 有 用 。 对 于 有 视力 障碍 
的 人 士 ， 键 盘 快 捷 方式 肯定 会 带 来 许多 方便 。 


一 般 来 说 ， 在 适用 于 Windows 系 统 的 浏览 器 里 ， 快 捷 
键 的 用 法 是 在 键盘 上 同时 按 下 Alt 键 和 特定 按键 ; 在 
适用 于 Mac 系 统 的 浏览 器 里 ， 快 捷 键 的 用 法 是 同时 按 
下 Ctrl 键 和 特定 按键 。 


下 面 是 accesskey 属性 是 一 个 例子 : 








«a href="index.html" accesskey="1">Home</a> 





注意 ”设置 太 多 的 快捷 键 往往 会 适得其反 一 一 
它们 或 许 会 与 浏览 器 内 建 的 键盘 快捷 方式 发 生 冲 


支持 accesskey 属性 的 浏览 器 有 很 多 ， 但 是 否 以 及 如 
何 把 快捷 键 的 分 配 情况 显示 在 页 面 上 却 需 要 由 身 为 网 
页 设计 人 员 的 你 们 来 决定 。 有 许多 网 站 都 会 在 一 个 快 
捷 键 清单 (accessibility statement ) 页 面 上 














列 明 该 网 站 都 支持 哪些 快捷 键 。 


一 些 基 本 的 快捷 键 都 有 约定 俗 成 的 设置 办 法 ， 对 此 感 
兴趣 的 读者 可 以 浏览 http://www.clagnut.com/blog/193/ 


accesskey="1" 对 应 着 一 个 “返回 到 本 网 站 主 
页 ”的 链接 ; 

accesskey="2" 对 应 着 一 个 “后 退 到 前 一 页 
面 * 的 链接 ; 

accesskey="4" 对 应 着 一 个 “打开 本 网 站 的 搜索 
表单 /页 面 ” 的 链接 ; 

accesskeyz"9" 对 应 着 一 个 “本 网 站 联系 办 

法 ”的 链接 ; 

accesskey="0" 对 应 着 一 个 “查看 本 网 站 的 快捷 
键 清单 ”的 链接 。 


下 面 是 一 个 网 站 导航 清单 的 例子 ， 使 用 了 快捷 键 : 


<ul id="navigation"> 
<li><a href="index.html" accesskey="1">Home</a></1i> 
<li><a href="search.html" accesskey="4">Search</a></1 
<li><a href="contact.html" accesskey-"0"»Contact«/a»« 


</ul> 





把 这 上 段 标记 添加 到 explanation.html 文档 的 
«body» 开标 签 的 后 面 。 


现在 ， 如 果 把 explanation.html 文档 加 载 到 一 个 浏 
览 句 里 ， 你 就 会 看 到 这 份 清单 里 的 链接 ， 但 看 不 到 任 
何 能 表明 这 些 链接 都 有 accesskey 属性 的 东西 。 


利用 DOM 技 术 ， 可 以 动态 地 创建 一 份 快 捷 键 清单 。 
下 面 是 具体 的 步骤 。 


(1) 把 文档 里 的 所 有 链接 全 部 提取 到 一 个 节点 集合 
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(3) 如 果 某 个 链接 带 有 accesskey 属性 ， 就 把 它 的 值 
保存 起 来 。 


(4) 把 这 个 链接 在 浏览 器 窗口 里 的 屏 显 标识 文字 也 保 
存 起 来 。 


(5) 创建 一 个 清单 。 


(6) 为 拥有 快捷 键 的 各 个 链接 分 别 创建 一 个 列表 项 
(li UH) . 


(7) 把 列表 项 添加 到 “快捷 键 清单 ”里 。 
(8) 把 “快捷 键 清单 ? 深 加 到 文档 里 。 
和 前 面 的 例子 一 样 ， 按 照 以 上 步骤 编写 函数 。 


把 这 个 函数 命名 为 dijsplayAccessKeys 并 存 
AdisplayAccessKeys.js “ft. 








这 个 函数 的 工作 原理 与 displayAbbreviations % 
数 很 相似 : 先 把 accesskey 属性 值 和 相关 链接 的 屏 显 
标识 文本 提取 出 来 并 存 入 一 个 关联 数组 ， 然 后 用 一 
个 for/in 循环 来 遍历 这 个 数组 以 创建 各 个 列表 项 。 


不 再 逐 行 讲 解 ， 下 面 是 最 终 完 代 
码 中 的 注释 语句 可 以 把 各 个 步骤 解释 清楚 。 





function displayAccesskeys() { 

if (!document.getElementsByTagName || !document.creat 
æ !document.createTextNode) return false; 
// 取得 文档 中 的 所 有 链接 


var links = document. getElementsByTagName("a") ; 











// 创建 一 个 数组 ， 保 存 访问 键 
var akeys = new Array(); 


// WIBER 





























for (var i=@; i«links.length; i++) { 
var current_link = links[i]; 
// 如 果 没 有 accesskey 属性 ， 继 续 循 环 
if (!current_link.getAttribute("accesskey")) contin 
// 取得 accesskey 的 值 
var key = current link.getAttribute("accesskey"); 
// 取得 链接 文本 
var text = current link.lastChild.nodeValue; 
// 添加 到 数组 
akeys[key] = text; 
} 
// 创建 列表 
var list = document.createElement("ul"); 
// 遍历 访问 键 
for (key in akeys) { 
var text = akeys[key]; 
// 创建 放 到 列表 项 中 的 字符 串 
var str = key + ": "«text; 
// 创建 列表 项 
var item = document.createElement("li"); 
var item text = document.createTextNode(str); 
item.appendChild(item text); 
// 把 列表 项 添加 到 列表 中 
list.appendChild(item) ; 


















































} 
// 创建 标题 
var header = document.createElement("h3"); 
var header_text = document.createTextNode("Accesskeys 
header.appendChild(header text); 
// 把 标题 添加 到 页 面 主体 
document .body.appendChild(header); 
// 把 列表 添加 到 页 面 主 体 
document.body.appendChild(list); 
} 
addLoadEvent(displayAccesskeys); 











为 了 调用 displayAccessKeys.js 文件 ， 还 需要 
在 explanation.html 文件 的 <head> 部 分 添加 一 组 
«script» 标签 : 





<script src="scripts/displayAccesskeys.js"></script> 


| J 


现在 ， 如 果 把 explanation.html 文档 加 载 到 一 个 浏 
蜂 器 里 ， 就 可 以 看 到 动态 创建 的 “快捷 键 清单 "， 如 图 
8-5 所 示 。 
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What is the Document Object Model? 


The W3C defines the DOM as: 


A platform- and language-neutra interface that will allow programs and scripts to dynamically 
access ard update the content, structu'e and style of documents. 39e 


Itis an API that can be used to navigate HTML and XML documents. 


Abbreviations 


World Wide Web Consortium 
Document Object Model 
Application Programming Interface 
HyperTex! Markup Language 
eXtensible Markup Language 








8.7 检索 和 添加 信息 


本 章 编号 了 几 个 很 有 用 的 脚本 ， 你 可 以 把 这 几 个 脚本 
用 到 任何 一 个 网 页 里 。 虽 然 它 们 用 途 不 一 ， 但 基本 思 
路 是 相同 的 : 用 JavaScript 函 数 先 把 文档 结构 里 的 一 些 
现 有 信息 提取 出 来 ， 再 把 那些 信息 以 一 种 清晰 和 有 意 
义 的 方式 重新 插入 到 文档 里 去 。 


这 些 函数 可 以 让 网 页 变 得 更 有 条 理 、 更 容易 浏览 
。 把 文档 里 的 缩 略 语 显示 为 一 个 < 缩 略 语 列表 ”。 
。 为 文档 里 引用 的 每 段 文献 节选 生成 一 个 < 文献 来 
源 链接 ”。 
+ ECTS Inte ru — etti 











你 可 以 根据 具体 情况 对 这 些 脚 本 做 进一步 改进 。 比 如 
说 ， 我 们 这 里 是 把 “文献 来 源 链接 ”直接 显示 在 每 
‘blockquote 元 素 的 后 面 ， 而 你 可 以 把 这 些 链接 集 
中 放 在 文档 末尾 的 一 个 清单 里 一 一 就 像 脚注 那样 。 再 
比如 说 ， 我 们 这 里 生成 了 一 份 * 快 捷 键 清单 ”， 而 你 可 
以 把 各 个 快捷 键 分 别 退 加 在 相关 链接 的 末尾 。 


当然 可 以 利用 本 章 介绍 的 技术 去 编写 一 些 全 新 的 脚 
本 。 例 如 ， 可 以 为 文档 生成 一 份 目录 : 把 文档 里 的 h1 
和 h2 元 系 提 取出 来 放 入 一 份 清单 ， 再 将 其 插入 到 文 
档 的 开头 。 甚 至 可 以 把 这 份 清单 里 的 列表 项 增强 为 一 
些 可 以 让 用 户 快速 到 达 各 有 关 标 题 的 内 部 链接 。 


只 需要 少量 DOM 方 法 和 属性 ， 就 可 以 创建 这 些 有 用 
的 脚本 。 如 果 你 想 通 过 DOM 脚 本 去 充实 网 页 的 内 
PNE 民 好 的 标记 文档 将 是 最 重要 的 前 提 
ZR o 


在 需要 对 文档 里 的 现 有 信息 进行 检索 时 ， 以 下 DOM 
方法 最 有 用 : 














e getElementById 
e getElementsByTagName 
e getAttribute 


在 需要 把 信息 添加 到 文档 里 去 时 ， 以 下 DOM 方 法 最 
AH: 


createElement 
createTextNode 
appendChild 
insertBefore 
setAttribute 


以 上 DOM 方 法 的 组 合 可 以 让 我 们 编写 出 功能 非常 强 
大 的 DOM 脚 本 来 。 


希望 大 家 始终 记 住 :JavaScript 脚 本 只 应 该 用 来 充实 文 
档 的 内 容 ， 要 避免 使 用 DOM 技 术 来 创建 核心 内 容 。 





8.8 Zi 


至 此 ， 我 们 一 直 在 使 用 JavaScript 语 言 和 DOM 去 维护 
和 创建 标记 。 在 下 一 章 里 ， 你 将 看 到 DOM 的 一 种 全 
新 应 用 ， 它 将 展示 如 何 运 用 DOM 去 处 理 诸 如 颜色 、 

字体 等 样式 信息 。DOM 技 术 不 仅 可 以 用 来 改变 网 页 
还 可 以 用 来 更 新 HTML 页 面 元 素 的 CSS 样 

Tye 


“97% CSS-DOM 
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e style 属性 
。 如 何 检索 样式 
e. 如 何 改变 样式 


在 本 章 里 ，Web 文 档 的 表示 层 和 行为 层 将 正面 接触 。 
p ee Gx) 和 设置 
( 写 ) CSS 信 息 。 





9.1 三 位 一 体 的 网 页 


我 们 在 浏览 器 里 看 到 的 网 页 其 实 是 由 以 下 三 层 信息 构 
成 的 一 个 共同 体 : 


。 结 构 层 
e KTZ 
。 行 为 层 


9.1.1 结构 层 


网 页 的 结构 层 (structural layer) 由 HTML 或 XHTML 
之 类 的 标记 语言 负责 创建 。 标 签 (tag) ， 也 就 是 那 
些 出 现在 尖 括 号 里 的 单词 ， 对 网 页 内 容 的 语义 含义 做 
出 了 描述 ， 例 如 ，<p> 标签 表达 了 这 样 一 种 语 

义 : “这 是 一 个 文本 段 。”( 如 图 9-1 所 示 。) 但 这 些 

标签 并 不 包含 任何 关于 内 容 如 何 显示 的 信息 。 


<p>An example of a paragraph</p> 








000 Example (c) 
@ © Memo: 


| An example of a paragraph 





图 9-1 
9.1.2 ARE 


表示 层 (presentation layer) 由 CSS 负 责 完 成 。CSS 摘 
述 页 面 内 容 应 该 如 何 呈 现 。 你 可 以 定义 这 样 一 个 CSS 
来 声明 : “文本 段 应 该 使 用 灰色 的 Arial 字 体 和 另外 几 
种 scan-serif 字 体 来 显示 。” 如 图 9-2 所 示 。 


pi 
color: grey; 
font-family: "Arial", sans-serif; 


} 


Example 


GOME oo: 





An example of a paragraph 








图 9-2 
9.1.3 WTAE 


行为 层 (behavior layer) 负责 内 容 应 该 如 何 啊 应 事件 
这 一 问题 。 这 是 JavaScript 语 言 和 DOM 主 字 的 领域 。 

例如 ， 我 们 可 以 利用 DOM 实 现 这 样 一 种 行为 :“ 当 用 
户 点 击 一 个 文本 段 时 ， 显 示 一 个 alert 对 话 框 。” 如 





图 9-3 所 示 。 


var paras = document.getElementsByTagName("p") ; 
for (var i=@; i«paras.length; i++) { 
paras[i].onclick = function() { 
alert("You clicked on a paragraph."); 
} 
} 


Example 


3 You clicked on a paragraph. 
1 


euin) 





图 9-3 


网 页 的 表示 层 和 行为 层 总 是 存在 的 ， 即 使 未 明确 地 给 
出 任何 具体 的 指令 也 是 如 此 。 此 时 ， Web 浏 览 器 将 应 
用 它 的 默认 样式 和 默认 事件 处 理 函 数 。 例如 ， 浏 览 器 
会 在 呈现 “文本 段 ”" 元 素 时 留 出 页 边 距 ， 当 用 户 把 鼠标 
指针 悬 停 在 某 个 元 素 的 上 方 时 ， UD LLL 
个 显示 着 该 元 素 的 title 属性 值 的 提示 框 ， 等 等 。 











9.1.4 分离 


在 所 有 的 产品 设计 活动 中 ， 选 择 最 适用 的 工具 去 解决 
问题 是 最 基本 的 原则 。 具 体 到 网 页 设计 工作 ， 这 意味 


Tii 


。 使 用 (X)HTML 去 搭建 文档 的 结构 ; 
。 使 用 CSS 去 设置 文档 的 呈现 效果 ; 
。 使 用 DOM 脚 本 去 实现 文档 的 行为 。 


不 过 ， 在 这 三 种 技术 之 间 存 在 着 一 些 潜 在 的 重 辣 区 

域 ， 你 也 已 见 过 这 样 的 例子 。 用 DOM 可 以 改变 网 页 
的 结构 ， 诸 如 createElement 和 appendChild 之 类 
的 DOM 方 法 允许 你 动态 地 创建 和 添 加 标记 。 


在 CSS 上 也 有 这 种 技术 相互 重 革 的 例子 。 诸 如 :hover 
和 :focus 之 类 的 伪 类 允许 你 根据 用 户 触 发 事件 改变 
元 素 的 呈现 效果 。 改 变 元 素 的 呈现 效果 当然 是 表示 层 
的 “势力 范围 >， 但 响应 用 户 触 发 的 事件 却 是 行为 层 的 
领地 。 表示 层 和 行为 层 的 这 种 重 登 形成 了 一 个 灰色 地 
TH o 





























没 错 ，CSS 正 在 利用 伪 类 走 进 DOM 的 领地 ， 但 DOM 
也 有 反击 之 道 。 你 可 以 利用 DOM 样 式 给 元 素 设 定 样 


A. 


92 style 属性 


文档 中 的 每 个 元 素 都 是 一 个 对 象 ， 每 个 对 象 又 有 着 各 
种 各 样 的 属性 。 有 一 些 属 性 告诉 我 们 元 素 在 节点 树 上 
的 位 置信 息 。 比 如 说 ，parentNode 、nextSibling 
~ previousSibling 、childNodes 、firstChild 
flllastchild 这 些 必 性， 就 告诉 了 我 们 文档 中 各 贡 点 
之 间 关 系 信息 。 


其 他 一 些 属性 (比如 nodeType 和 nodeName 属性 ) 
包含 元 素 本 身 的 信息 。 比 如 说 ， 对 某 个 元 素 的 
nodeName 属性 进行 的 查询 将 返回 一 个 诸如 中” 之 类 的 
字符 串 。 

除 此 之 外 ， 文 档 的 每 个 元 素 节 点 还 都 有 一 个 属 

性 style 。style 属性 包含 着 元 素 的 样式 ， 查 询 这 个 
属性 将 返回 一 个 对 象 而 不 是 一 个 简单 的 字符 串 。 样 式 
都 存放 在 这 个 style 对 象 的 属性 里 : 


element.style.property 


下 面 是 一 个 内 钥 样 式 的 <p> 元 素 的 例子 : 














<p id-"example" style="color: grey; font-family: ‘Arial 
An example of a paragraph 


</p> 





利用 style 属性 ， 你 可 以 得 到 这 个 <p> 标签 的 样式 。 


首先 ， 需 要 从 文档 里 把 这 个 元 素 找 出 来 。 我 已 经 给 这 
<p> 标签 设置 了 一 个 独一无二 的 id 值 example . 
只 需 把 这 个 id 值 传递 给 getElementById 方法 ， 再 








把 这 个 方法 的 返回 值 赋值 给 变量 para , xn] Dit 
para 变量 引用 这 个 p 元 素 了 : 


var para = document.getElementById("example"); 





在 拿 到 这 个 元 素 的 样式 之 前 ， 我 想 先 向 大 家 证 明 一 
下 style 属性 确实 是 一 个 对 象 。 这 可 以 利用 关键 

字 typeof 来 验证 。 下 面 ， 我 们 来 对 比 一 下 style 属 
性 与 nodeName 属性 的 typeof 结 


把 下 面 这 些 XHTML 代 码 写 入 文件 example.html , 
然后 把 这 个 文件 加 载 到 浏览 右 里 : 


<!DOCTYPE html» 

«html» 

«head» 
«meta charset-"utf-8" /» 
<title>Example</title> 
<script> 

window.onload = function() { 
var para = document.getElementById("example"); 
alert(typeof para.nodeName) ; 
alert(typeof para.style); 

j 


</script> 
</head> 


<body> 
<p id-"example" style="color: grey; font-family: ‘Aria 
An example of a paragraph 
</p> 
</body> 
</html> 





第 一 条 alert 语句 将 返回 字符 串 “string”， 
为 nodeName 属性 是 一 个 字符 串 〈( 如 图 9-4 所 示 )。 











Done 
图 9-4 


第 二 条 alert iB AiR EF “object”, AlAstyle 
属性 是 一 个 对 象 〈 如 图 9-5 所 示 ) 。 











图 9-5 


也 就 是 说 ， 不 仅 文 档 里 的 每 个 元 系 痢 是 一 个 对 象 ， 
个 元 素 都 有 一 个 style 属性 ， 它 们 也 是 一 个 对 象 。 





9.2.1 获取 样式 


你 能 够 得 到 para 变量 所 代表 的 <p> 标签 的 样式 。 为 
了 和 碍 出 某 个 元 素 在 浏览 堪 里 的 显示 凑 色 ， 我 们 需要 使 
用 style 对 象 的 color 属性 : 





element.style.color 





下 面 这 条 alert 语句 告诉 我 们 style 对 象 〈 这 个 对 象 
是 para 元 素 的 属性 ) 的 color 属性 : 


alert("The color is " + para.style.color); 





这 个 元 素 的 style 属性 的 color 属性 是 “grey”( 如 图 


9-6 所 示 ) o 


q=" A x a The color is grey M o z 





Done 


图 9-6 


刚才 的 代码 中 还 设置 了 <p> 元 素 的 另 一 个 CSS 属 
性 font-family 。 这 个 属性 的 获取 方式 与 color 属 
性 略 有 不 同 。 你 不 能 简单 地 查询 style 对 象 的 font- 
family ， 因 为 “font* 和 “family” 之 间 的 连 字符 与 





JavaScript 语 言 中 的 减法 操作 符 相 同 ，JavaScript 会 把 
它 解 释 为 减 写 。 如 果 像 下 面 这 样 去 访问 名 为 font- 
family 的 属性 ， 束 会 收 到 一 条 出 错 信 息 : 


element.style.font-family 





JavaScript 将 把 减 写 前 面 的 内 容 解 释 为 “元 素 的 style 

属性 的 font 属性 ”， 把 减 写 后 面 的 内 容 解释 为 一 个 名 
为 family 的 变量 ， 把 整个 表达 式 解 释 为 一 个 减法 运 
算 。 这 完全 违背 了 我 的 本 意 ! 


减 写 和 加 号 之 类 的 操作 符 是 保留 人 字符， 不 允许 用 在 函 
数 或 变量 的 名 字 里 。 这 同时 意味 着 它们 也 不 能 用 在 方 
法 或 属性 的 名 字 里 ( 别 忘 了 ， 方 法 和 属性 其 实 是 关联 
在 东 个 对 象 上 的 函数 和 变量 ) 。 


当 你 需要 引用 一 个 中 间 市 减 号 的 CSS 属 性 时 ，DOM 要 
求 你 用 驳 峰 命 名 法 。CSS 属 性 font-family 变 为 
DOM 属 性 fontFamily : 








element.style.fontFamily 





为 了 查看 para 元 素 的 style 属性 的 fontFamily 属 
性 ， 在 example.html 文件 里 增加 一 条 alert 语句 : 





<!DOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 
window.onload = function() { 
var para = document.getElementById("example"); 
alert("The font family is " + para.style.fontFamily); 
} 


</script> 
</head> 
<body> 
«p id="example" style="color: grey; font-family: ‘Ari 
An example of a paragraph 
</p> 
</body> 
</html> 





在 浏览 器 里 重新 加 载 example.html 文件 将 能 看 到 如 
图 9-7 所 示 的 结果 。 
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图 9-7 


DOM 属 性 fontFamily 的 值 与 CSS 属 性 font-family 
的 值 是 一 样 的 。 有 基体 到 这 个 例子 ， 它 是 


'Arial',sans-serif 





不 管 CSS 样 式 属性 的 名 字 里 有 多 少 个 连 字 符 ，DOM 一 





律 采 用 张 峰 命名 法 来 表示 它们 。CSS 属 

性 background-color 对 应 着 DOM 属 

性 backgroundColor ，CSS 属 性 font-weight 对 应 
着 DOM 属 性 fontweight ，DOM 属 

性 marginTopwidth 对 应 着 CSS 属 性 margin-top- 
width . 


DOM 在 表示 样式 属性 时 采用 的 单位 并 不 总 是 与 它们 
在 CSS 样 式 表 里 的 设置 相同 。 


在 示例 的 <p> 元 素 里 ，CSS 属 性 color 的 设置 值 是 单 
词 “grey”， 用 JavaScript 代 码 检索 出 来 的 DOM color 
属性 的 值 也 是 “grey”。 现 在 ， 把 这 个 color 属性 修改 
为 十 六 进 制 值 #999999: 


<p id-"example" style="color: #999999; font-family: ‘Ar 





再 在 JavaScript 代 码 里 加 上 一 条 alert 语句 输出 DOM 
里 的 color 属性 : 


alert("The color is " + para.style.color); 


在 某 些 浏 览 器 里 ，color 属性 以 RGB CZL, 2%, W) 
格式 的 颜色 值 (153,153,153) 返 回 ， 如 图 9-8 所 示 。 








= ex] € | Y o 
NC WwW €] The color is rgb(153, 153, 153) 
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图 9-8 


还 好 ， 这 类 例外 情况 并 不 多 。 绝 大 部 分 样式 属性 的 返 
回 值 与 它们 的 设置 值 都 采用 同样 的 计量 单位 。 如 果 我 
们 在 设置 CSS font-size 属性 时 以 em 为 单位 ， 相 应 
的 DOM fontSize 属性 也 将 以 em 为 单位 : 


<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 
window.onload = function() { 
var para = document.getElementById("example"); 
alert("The font size is " + para.style.fontSize) ; 
} 
</script> 
</head> 
<body> 
<p id-"example" style="color: grey; font-family: ‘Arid 
æ font-size: 1em;"» 
An example of a paragraph 
</p> 
</body> 
</html> 





如 图 9-9 所 示 ，DOM fontSize 属性 的 确 也 是 以 em 为 
单位 的 。 


wq [rr t c The font size is lem n 


(eot) 





Done 


图 9-9 


如 果 CSS font-size 属性 的 值 是 lem, DOM 
fontSize 属性 的 返回 值 就 将 是 lem。 如 果 CSS font- 
size 属性 的 值 是 12px，DOM fontSize 属性 的 返回 
值 就 将 是 12px。 





使 用 CSS 速 记 属性 ， 你 可 以 把 多 个 样式 组 合 在 一 起 写 
成 一 行 。 比 如 说 ， 如 果 声 明 了 font: 12px 
'Arial', sans-serif, CSS font-size 属性 将 被 
设置 为 12px CSS font-family 属性 将 被 设置 

为 'Arial'，sans-serif: 


<p id-"example" style="color: grey; font: 12px 'Arial',s 





DOM 能 够 解析 像 font 这 样 的 速记 属性 。 如 果 查 询 
fontSize 属性 ， 将 得 到 一 个 12px 的 值 : 


alert("The font size is " + para.style.fontSize); 





如 图 9-10 所 示 ，DOM fontSize 属性 的 确 也 是 以 px 为 
单位 的 。 





TE 1 € < - 
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Done 








图 9-10 
VI ERIEIN 
通过 style 属性 获取 样式 有 很 大 的 局 限 性 。 











style BIER RERE ARIEN. AL, AAT 
CSS style 属性 插入 到 标记 里 ， 才 可 以 用 DOM 
style 属性 去 查询 那些 信息 : 


<p id-"example" style="color: grey; font: 12px 'Arial',s 











这 可 不 是 使 用 样式 的 好 办 法 一 一 表现 信息 与 结构 混杂 
在 一 起 了 。 更 好 的 办 法 是 用 一 个 外 部 样式 表 去 设置 样 


A: 


p#example { 
color: grey; 
font: 12px 'Arial', sans-serif; 


} 





把 上 面 这 段 CSS 代 码 存 入 文件 styles.css 。 然 后 ， 
从 example.html 文件 里 把 内 舱 在 HTML 代 码 里 的 样 
式 删 挥 ， 只 保留 以 下 内 容 : 


«p id="example"> 
An example of a paragraph 
</p> 





在 example.html 文件 的 开头 部 分 加 上 一 个 Link 元 
素 并 让 它 指向 styles.css 文件 : 


<link rel="stylesheet" media="screen" href="styles/style 





样式 还 像 以 前 那样 作用 到 了 HTML 内 容 上 ， 但 与 使 


用 style 属性 不 同 ， 来 自 外 部 文件 styles.css 的 样 
式 已 经 不 能 再 用 DOM style 属性 检索 出 来 了 。 


alert("The font size is " + para.style.fontSize); 


DOM style 属性 不 能 用 来 检索 在 外 部 CSS 文 件 里 声 
明 的 样式 ， 如 图 9-11 所 示 。 


E NM | ] G 
q Ry x c) The font size is : - 
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如 果 把 样式 添加 在 example.html 文件 <head> 部 分 
的 <style> 标签 里 ， 你 将 看 到 相同 的 结果 : 


<style> 
p#example { 
color: grey; 
font: 12px 'Arial', sans-serif; 


j 
«/style» 





DOM style 属性 提取 不 到 如 此 设置 的 样式 。 


在 外 部 样式 表 里 声明 的 样式 不 会 进入 style XR. TE 
文档 的 <head> 部 分 里 声明 的 样式 也 是 如 此 。 


style 对 象 只 包含 在 HTML 代码 里 用 style 属性 声明 
的 样式 。 但 这 几乎 没有 实用 价值 ， 因 为 样式 应 该 与 标 
记分 离开 来 。 


现在 ， 你 或 许 会 认为 用 DOM 去 处 理 CSS 样 式 毫 无 意 
义 ， 但 这 里 还 有 另 一 种 情况 可 以 让 DOM style 对 象 
能 够 正确 地 反射 出 我 们 设置 的 样式 。 你 用 DOM 设 置 
的 样式 ， 就 可 以 用 DOM 再 把 它们 检索 出 来 。 


9.2.2 设置 样式 


许多 DOM 属 性 是 只 读 的 一 一 我 们 只 能 用 它们 来 获取 
信息 ， 但 不 能 用 它们 来 设置 或 更 新 信息 。 类 

似 previousSibling ~ nextSibling 
、parentNode 、firstChild 和 1lastChild 之 类 的 
属性 ， 它 们 在 你 收集 一 个 元 素 在 节点 树 上 的 位 置信 息 
时 可 以 帮 上 上 大忙， 但 它们 不 能 用 来 更 新 信息 。 


几 事 无 绝对 ，style 对 象 的 各 个 属性 就 都 是 可 该 写 
的 。 我 们 不 仅 可 以 通过 茶 个 元 素 的 style 属性 去 获取 
样式 ， 还 可 以 通过 它 去 更 新 样式 。 你 可 以 用 赋值 操作 
来 更 新 样式 : 


element.style.property = value 


style 对 象 的 属性 值 永 远 是 一 个 字符 串 。 
fEexample.html XF Hi 5j — JavaScript V1378 n5 Jb 
LEA miEbiumBHmcssq. Ebünyi. flpara 元 素 
对 象 的 color 属性 设置 为 "black": 














<!DOCTYPE html» 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 


window.onload = function() { 
var para = document.getElementById("example"); 
para.style.color = "black"; 
} 
</script> 
</head> 
<body> 
<p id="example" style="color: grey; font-family: 'Ari 
An example of a paragraph 
</p> 
</body> 
</html> 





color 属性 已 经 被 变 成 了 "black" ， 如 图 9-12 所 示 。 
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An example of a paragraph 





Done 
图 9-12 


style 对 象 的 属性 的 值 必须 放 在 引号 里 ， 单 引号 或 双 
引号 均 可 : 


para.style.color = 'black'; 





如 果 忘 了 使 用 引号 ，JavaScript 会 把 等 写 右 边 的 值 解释 
为 一 个 变量 : 


para.style.color = black; 











如 果 前 面 并 未 定义 过 变量 black ， 则 上 面 这 行 代码 将 
FOE LIP: 


用 赋值 操作 符 你 可 以 设置 任何 一 种 样式 属性 ， 诸 如 
font 之 类 的 速记 属性 也 不 例外 : 


para.style.font = "2em 'Times',serif"; 





上 面 这 条 语句 将 把 fontsize 属性 设置 为 2eem， 把 
fontFamily 属性 设置 为 'Times'，serif ， 如 图 9- 
13 所 示 。 


An example of a 


paragraph 





图 9-13 
通过 JavaScript 代 码 设置 样式 并 不 难 ， 我 也 给 出 了 一 些 


d EE 不 过 或 许 应 该 先 问 问 目 己 : 为 什么 要 这 人 么 
Wu? 


9.3” 何 时 该 用 DOM 肢 本 设置 样式 


你 已 经 看 到 ， 用 DOM 设 置 样式 是 多 么 容易 ， 但 你 能 
做 什么 事 并 不 意味 着 你 应 该 做 什么 事 。 在 绝 大 多 数 场 
合 ， 还 是 应 该 使 用 CSS 去 声明 样式 。 就 像 你 不 应 该 利 
用 DOM 去 创建 重要 的 内 容 那样 ， 你 也 不 应 该 利用 
DOM 为 文档 设置 重要 的 样式 。 

不 过 ， 在 使 用 CSS 不 方便 的 场合 ， 还 是 可 以 利用 DOM 
对 文档 的 样式 做 一 些小 的 增强 。 


9.3.1 根据 元 素 在 节点 树 里 的 位 置 来 设置 样 
起 


通过 CSS 声 明 样 式 的 具体 做 法 主要 有 三 种 。 第 一 种 是 
为 标签 元 素 〈 比 如 p 元 素 ) 统一 地 声明 样式 ， 如 下 所 
ZN: 











pt 
font-size: 1em; 


} 








第 二 种 是 为 有 特定 class 属性 的 所 有 元 系统 一 声明 样 
式 ， 如 下 所 示 : 


.fineprint { 
font-size: .8em; 


} 





第 三 种 是 为 有 独一无二 的 id 属性 的 元 素 单独 声明 样 
式 ， 如 下 所 示 : 


#intro { 


font-size: 1.2em; 


} 





也 可 以 为 有 类 似 属 性 的 多 个 元 素 声明 样式 ， 如 下 所 
7: 
input[type*-"text"] { 


font-size:1.2em; 


j 











BN ， 甚 至 可 以 根据 元 素 的 位 置 声明 样 
JX: 
p:first-of-type { 


font-size:2em; 
font-weight: bold; 


} 
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child 和 :last-child ， 而 CSS3 则 定义 了 诸 

如 :nth-child() 和 :nth-of-type() 之 类 的 位 置 选 
择 器 。 尺 管 如 此 ， 在 文档 的 节点 树 中 ， 为 特定 位 置 的 
某 个 元 素 应 用 样式 仍旧 不 是 件 容易 的 事 。 例 如 ， 在 
CSS3 中 ， 你 可 以 使 用 h1 ~ * 选 择 器 为 所 有 hl 元 素 的 下 
一 个 同辈 元 素 声 明 样 式 。 问 题 是 ， 有 那么 多 的 浏览 器 
根本 不 支持 CSS3 的 这 些 可 爱 的 位 置 选择 器 。 


现在 ，CSS 还 无 法 根据 元 素 之 间 的 相对 位 置 天 系 找 出 
东 个 特定 的 元 系 ， 但 这 对 DOM 来 说 却 不 是 什么 难 
题 。 我 们 可 以 利用 DOM 轻 而 易 举 地 找 出 文档 中 的 所 
有 hl 元 率 ， 然 后 再 同样 轻而易举 地 找 出 紧 跟 在 每 











个 hl 元 素 后 面 的 那个 元 素 ， 并 把 样式 添加 给 它 。 


首先 ， 用 getElementsByTagName 方法 把 所 有 的 h1 
元 素 找 出 来 : 


var headers = document. getElementsByTagName("h1") ; 











IA, WLS ARG BATA CR: 


for (var i20; i«headers.length; i++) { 





ote 以 用 nextSibling 属性 查找 


headers[i].nextSibling 











请 注意 ， 这 里 真正 需要 的 不 是 “下 一 个 节点 ”， 而 
是 “下 一 个 元 素 节点 ”。 下 面 这 个 getNextE1Lement eh 
数 可 以 让 我 们 轻松 完成 这 一 任务 : 








function getNextElement(node) { 
if(node.nodeType == 1) { 
return node; 


if (node.nextSibling) { 
return getNextElement(node.nextSibling); 


} 


return null; 


} 





ose ae 元 素 (Biheaders[i] ) 的 nextSibling 
点 作为 参数 传递 给 getNextElement 函数 ， 并 把 这 
^ 数 调 用 的 返回 值 赋值 给 elem 变量 : 


var elem = getNextElement(headers[i].nextSibling); 
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elem.style.fontWeight - "bold"; 
elem.style.fontSize - "1.2em"; 





最 后 ， 把 以 上 代码 封装 到 函 

数 styleHeadersiblings 中 ， 别 筷 了 安排 一 些 测试 
去 检查 浏览 器 能 人 否 理解 我 们 在 这 个 函数 里 用 到 的 
DOM 方 法 : 








function styleHeaderSiblings() { 

if (!document.getElementsByTagName) return false; 

var headers = document. getElementsByTagName("h1") ; 

var elem; 

for (var i=@; i«headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 
elem.style.fontWeight = "bold"; 
elem.style.fontSize - "1.2em"; 


} 


j 
function getNextElement(node) ( 


if(node.nodeType -- 1) ( 
return node; 


if (node.nextSibling) ( 
return getNextElement(node.nextSibling); 


return null; 


} 


pO 


你 可 以 用 window.onload 事件 调用 这 个 函数 : 


window.onload = styleHeaderSiblings; 





但 更 好 的 做 法 是 用 addLoadEvent 函数 ， 这 样 你 就 能 
很 方便 地 把 更 多 的 函数 绑 定 到 这 个 事件 : 


addLoadEvent(styleHeaderSiblings); 





下 面 是 addLoadEvent 函数 的 代码 清单 ， 你 可 以 把 它 
保存 到 一 个 外 部 文件 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 


func(); 





为 了 看 到 styleHeaderSiblings 函数 的 使 用 效果 ， 
写 一 个 HTML 文 档 ， 并 在 里 面 添加 一 些 一 级 标题 
( 即 h1 元 素 ) : 


<!DOCTYPE html» 
<html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Man bites dog</title> 
</head> 
<body> 
«hi»Hold the front page</h1> 
<p>This first paragraph leads you in.</p> 
<p>Now you get the nitty-gritty of the story.</p> 
<p>The most important information is delivered first. 
<hi>Extra! Extra!</h1> 
<p>Further developments are unfolding.</p> 
<p>You can read all about it here.</p> 
</body> 
</html> 





把 这 个 文档 保存 为 story.html 文件 。 图 9-14 是 它 目 
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Hold the front page 


This first paragraph leads you in. 
Now you get the nitty-gritty of the story. 


The most important information is delivered first. 


Extra! Extra! 


Further developments are unfolding. 


You can read all about it here. 





图 9-14 


Be BOK, 创建 文件 夹 scripts 来 存放 JavaScript 脚 本 
文件 。 把 addLoadEvent 函数 存 为 一 个 名 
7JjaddLoadEvent.js 的 文件 ， 并 把 它 放 到 这 个 文件 
夹 ， 把 styleHeaderSiblings 函数 存 为 一 个 名 


ZjstyleHeaderSiblings.js 的 文件 ， 也 把 它 放 到 
此 文件 夹 。 


为 了 调用 这 两 个 JavaScript 脚 本 文件 ， 还 需要 
在 story .html 文件 的 </body> 标签 之 前 插入 一 些 
<script> 标签 : 


<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/styleHeaderSiblings.js"></script> 





现在 ， 把 story .html 文件 加 载 到 Web 浏 览 右 中 ， 你 
就 可 以 看 到 DOM 脚 本 生成 的 样式 效果 了 。 动 态 设 置 
的 样式 将 作用 于 紧 跟 在 各 个 hi 元 素 后 面 的 那个 元 素 
(如 图 9-15 所 示 ) 。 
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This first paragraph leads you in. 
Now you get the nitty-gritty of the story. 


The most important information is delivered first. 


Extra! Extra! 


Further developments are unfolding. 


You can read all about it here. 





图 9-15 


从 理论 上 讲 ， 这 类 样式 还 是 应 该 用 CSS 来 设置 ， 但 在 
实践 中 ， 用 CSS 来 设置 这 类 样式 的 难度 往往 会 很 大 。 
具体 到 这 个 例子 ， 其 实 只 需 给 紧 跟 在 hl1 元 素 后 面 的 
每 个 元 素 添 加 一 个 class 属性 ， 就 可 以 用 CSS 来 获得 
同样 的 效果 。 但 如 果 文 档 的 内 容 需 要 定期 编辑 和 刷 








Bt, Wclass 属性 的 工作 很 快 整 会 变 成 一 种 负担 。 
不 仅 如 此 ， 如 果 文 档 的 内 容 需 要 通过 一 个 CMS 内容 
管理 系统 ) 来 处 理 ， 给 文档 内 容 的 个 别 部 分 添 

加 class 属性 或 其 他 样式 的 做 法 甚至 是 不 允许 的 。 


9.3.2 ”根据 某 种 条 件 反 复 设 置 某 种 样式 


不 妨 假设 我 有 一 份 由 一 些 日 期 和 地 名 构成 的 清单 ， 比 
如 一 份 乐队 演出 日 程 表 或 一 份 旅行 日 程 表 。 我 们 不 必 
关心 它 到 底 是 什么 ， 只 要 其 中 的 日 期 和 地 点 有 直接 对 
应 的 关系 就 行 了 。 对 ， 就 是 表格 型 数据 ， 把 表格 型 数 
据 转 换 为 HTML 内容 的 理想 标签 当然 是 <table> 。 


注意 ”在 用 CSS 安 排 你 的 内 容 时 ， 生 万 不 要 人 云 
亦 云 地 认为 表格 都 是 不 好 的 。 虽 然 利 用 表格 来 做 
页 面 布 局 不 是 好 主意 ， 但 利用 表格 来 显示 表格 数 
据 却 是 理 所 应 当 的 。 


下 面 是 为 这 个 表格 编写 的 标记 : 























<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Cities</title> 
</head> 
<body> 
<table> 
<caption>Itinerary</caption> 
<thead> 
<tr> 
«th»When«/th» 
«th»Where«/th» 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>June 9th</td> 
<td>Portland, «abbr title="Oregon">OR</abbr></td> 
</tr> 
<tr> 
«td»June 10th«/td» 


<td>Seattle, <abbr title="Washington" >WA</abbr></ 
</tr> 


<tr> 


<td>June 12th</td> 
<td>Sacramento, «abbr title-"California"»CA«/abbr 
«/tr» 
«/tbody» 
«/table» 
«/body» 
</html> 





把 这 些 代 码 保存 为 itinerary .html 文件 。 如 果 现 在 
就 把 这 个 文件 加 载 到 一 个 web 浏 览 器 里 ， 你 将 看 到 一 
个 包 售 全 部 的 信息 但 采 滞 模糊 的 表格 ， 如 图 9-16 所 
示 。 








Itinerary 
When Where 
June 9th Portland, OR 
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编写 一 个 CSS 样 式 表 ， 让 其 中 的 数据 可 读 性 更 好 : 





body { 
font-family: "Helvetica", "Arial", sans-serif; 
background-color: #fff; 
color: #000; 


} 

table { 
margin: auto; 
border: 1px solid #699; 

} 

caption { 
margin: auto; 
padding: .2em; 
font-size: 1.2em; 
font-weight: bold; 

} 

th { 
font-weight: normal; 
font-style: italic; 
text-align: left; 
border: 1px dotted #699; 
background-color: #9cc; 
color: #000; 

j 

th,td { 
width: 10em; 
padding: .5em; 

} 





把 这 个 CSS 样 式 表 保存 为 format.css 文件 并 将 其 放 
入 文件 夹 styles 里 。 在 itinerary .html 文档 的 
«head» 部 分 增加 一 个 <link> 标签 来 引用 这 个 CSS 文 
件 : 


<link rel="stylesheet" media="screen" href="styles/formd 





在 Web 浏 览 堪 里 刷新 itinerary.html 文件 就 可 以 看 
到 这 个 CSS 的 效果 ， 如 图 9-17 所 示 。 





A 


ltinerary 
Where 





June 9th Portland, OR 
June 10th 
June 12th 
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让 表格 里 的 行 更 可 读 的 常用 技巧 是 交 蔡 改变 它们 的 背 

景色 ， 从 而 形成 斑马 线 效 果 ， 使 相 邻 的 两 行 泾 渭 分 
明 。 通 过 分 别 设置 奇数 行 和 偶数 行 样 式 的 办 法 可 实现 

这 种 效果 。 如 果 浏 览 器 支持 CSS 3， 那 束 很 简单 ， 只 
要 如 下 两 行 样式 : 











tr:nth-child(odd) { background-color:#ffc; } 
tr:nth-child(even) { background-color:#fff; } 





如 果 :nth-child() 不 可 用 ， 要 获取 同样 的 效果 束 只 
好 采用 另外 的 技术 。 有 具体 到 itinerary.html 文档 这 





个 例子 ， 只 需 为 表格 中 的 每 个 奇 数 行 (或 每 个 偶数 
行 ) 设置 一 个 class 属性 即 可 。 不 过 ， 这 个 方法 不 够 
方便 ， 尤 其 是 对 大 表格 来 说 更 是 如 此 : 如 果 你 以 后 要 
在 这 个 表格 的 中 间 插 入 或 删除 一 行 ， 就 不 得 不 痛苦 地 
手动 更 新 大 量 的 class 属性 。 


JavaScript 特 别 擅长 处 理 重 复 性 任务 。 用 一 个 while 
或 for 循环 就 可 以 轻松 地 裔 历 一 个 很 长 的 列表 。 





FY UA 7S BR BORA ACRES IE RRR BE 
行 设 置 样式 就 行 了 。 


(1) 把 文档 里 的 所 有 table 元 素 找 出 来 。 


(2) 对 每 个 table 元 素 ， 创 建 odd 变量 并 把 它 初始 化 
为 false 。 


(3) 骨 历 这 个 表格 里 的 所 有 数据 行 。 


(4) 如 果 变 量 odd 的 值 是 true ， 设 置 样式 并 把 odd 变 
量 修改 为 false . 


(5) 如 果 变 量 odd 的 值 是 false ， 不 设置 样式 ， 但 把 
odd 变量 修改 为 true 。 


我 为 这 个 函数 命名 为 stripeTables 。 这 个 函数 不 需 
要 参数 ， 所 以 函数 名 后 面 的 圆 括号 是 空 的 。 别 筷 了 在 
这 个 函数 的 开头 部 分 安排 一 些 测 试 ， 检 查 浏 览 器 是 否 
文 持 函数 中 用 到 的 那些 DOM 方 法 : 








function stripeTables() ( 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
var odd, rows; 
for (var i20; i«tables.length; i++) { 
odd = false; 
rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j«rows.length; j++) { 
if (odd == true) ( 
rows[j].style.backgroundColor = "#ffc"; 
odd = false; 
} else { 
odd = true; 





这 个 函数 应 该 在 页 面 加 载 时 执行 。 用 addLoadEvent 
函数 来 做 这 件 事 再 合适 不 过 : 


addLoadEvent(stripeTables); 





把 以 上 JavaScript 代 码 保存 为 文件 stripeTables .js 
， 再 将 其 和 addLoadEvent .js 文件 都 放 到 文件 
3éscripts 里 去 。 


在 itinerary.html 文档 的 </body> 标签 之 前 ， 增 加 
两 个 <script> 标签 来 调用 这 两 个 JavaScript 脚 本 文 
fF: 


«script src-"scripts/addLoadEvent. js"»«/script» 
«script src="scripts/stripeTables.js"></script> 





把 itinerary .html 文件 加 载 到 一 个 Web 浏 览 器 里 ， 
就 可 以 看 到 表格 里 的 偶数 行 都 有 了 一 个 新 的 背景 闫 
色 ， 如 图 9-18 所 示 。 
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图 9-18 


很 凑巧 ， 上 一 章 的 displayAbbreviations 函数 也 
适用 于 这 个 文档 。 把 displayAbbreviations.js 文 
件 也 放 到 scripts 文件 夹 里 ， 并 在 itinerary .html 
文档 再 增加 一 个 <script> 标签 引用 它 。 在 Web 浏 览 
器 里 刷新 这 个 页 面 可 以 看 到 动态 生成 的 “ 缩 略语 列 
表 ”， 如 图 9-19 所 示 。 
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图 9-19 


9.3.3 ”响应 事件 


只 要 有 可 能 ， 最 好 选用 CSS 为 文档 设置 样式 。 话 虽 这 
样 说 ， 你 刚才 也 看 到 一 些 CSS 不 能 处 理 或 是 难以 部 署 
的 情况 。 在 这 类 CSS 力 不 从 心 的 场合 ，DOM 可 以 帮 上 
Ra 


何 时 应 该 使 用 CSS 来 设置 样式 ， 何 时 应 该 使 用 DOM 来 
设置 样式 并 不 总 是 那么 容易 决定 。 如 下 问题 涉及 需要 
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CSS 提 供 的 :hover S& [class 属性 允许 我 们 根据 
HTML 元 素 的 状态 来 改变 样式 。DOM 也 可 以 通过 
onmouseover 等 事件 对 HTML 元 素 的 状态 变化 做 出 响 
应 。 很 难 判断 何 时 应 该 使 用 :hover 属性 、 何 时 应 该 
使 用 onmouseover 事件 。 


最 简单 的 答案 是 选择 最 容易 实现 的 办 法 。 比 如 说 ， 如 
果 只 是 想 让 链接 在 鼠标 指针 芒 停 在 其 上 时 改变 颜色， 
BEN Awe HICSS: 





a:hover { 
color: #c60; 





伪 类 :hover 已经 得 到 了 绝 大 多 数 浏览 器 的 支持 一 一 
至 少 在 它 被 用 来 改变 链接 的 样式 时 是 如 此 。 但 如 果 还 
想 利 用 这 个 伪 类 在 鼠标 指针 悬 停 在 其 他 元 素 上 时 改变 
样式 ， 支 持 这 种 用 法 的 浏览 器 就 没有 那么 多 了 。 


仍 以 itinerary .html 文档 中 的 表格 为 例 。 如 果 想 让 
某 行 在 鼠标 指针 其 停 其 上 时 其 文本 变 为 粗 体 ， 可 以 使 
用 CSS: 








tr:hover { 
font-weight: bold; 


} 





MEW EVE, MEn El ete ERS A — (1. RAT 
ASC AS IIMA TIER WA; 但 在 实践 中 ， 这 种 效果 只 能 
在 一 部 分 浏览 器 里 看 到 。 


在 这 样 的 场合 ，DOM 却 能 够 得 到 公平 对 符 。 绝 大 多 





数 的 现代 浏览 器 ， 虽 然 对 CSS 伪 类 的 支持 很 不 完整 ， 
但 对 DOM 却 都 有 着 良好 的 支持 。 在 浏览 器 们 对 CSS 的 
支持 进一步 完善 之 前 ， 在 事件 发 生 时 用 DOM 改 变 
HTML 元 素 的 样式 更 切合 实际 。 


下 面 这 个 highlightRows 函数 将 在 鼠标 指针 晨 停 在 
某 个 表格 行 的 上 方 时 ， 把 该 行文 本 加 黑 加 粗 : 





function highlightRows() { 
if(!document.getElementsByTagName) return false; 
var rows = document.getElementsByTagName("tr"); 
for (var i20; i«rows.length; i++) { 
rows[i].onmouseover = function() ( 
this.style.fontWeight - "bold"; 


rows[i].onmouseout = function() ( 


this.style.fontWeight - "normal"; 
} 
} 


addLoadEvent (highlightRows) ; 





把 这 个 函数 存 入 文件 highlightRows .js 并 把 它 放 
入 scripts 文件 来， 然后 在 itinerary.html 文档 的 
</body> 标签 之 前 增加 一 个 如 下 所 示 的 <script> 标 
pd 


WIS 


<script src="scripts/highlightRows.js"></script> 





在 Web 浏 览 器 里 刷新 itinerary.html 文档 。 现 在 ， 





当 你 把 鼠标 指针 惹 信 在 某 个 表格 行 的 上 方 时 ， 这 个 表 
格 行 里 的 文本 将 加 黑 加 粗 ， 如 图 9-20 所 示 。 
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图 9-20 


在 这 一 类 场合 ， 需 要 决定 是 采用 纯粹 的 CSS 来 解决 ， 
还 是 利用 DOM 来 设置 样式 。 你 需要 考虑 以 下 因 系 : 


。 这 个 问题 最 简单 的 解决 方案 是 什么 ; 
e 哪 种 解决 方案 会 得 到 更 多 浏览 需 的 文 持 。 


要 做 出 明智 的 执 择 ， 束 必须 对 CSS 和 DOM 技 术 都 有 足 
够 深入 的 了 解 。 如 果 你 手 里 只 有 郴 头 ， 那 么 你 看 到 的 
任何 东西 都 像 千 子 。 如 果 你 只 喜欢 使 用 CSS， 你 十 有 
八 九 会 选择 一 个 CSS 解 决 方案 ， 而 不 考虑 JavaScript 解 
决 方案 的 效果 会 不 会 更 好 。 反 之 ， 如 果 你 只 懂得 写 
DOM 脚 本 ， 你 往往 会 立刻 动手 编写 JavaScript 函 数 ， 
而 不 去 考虑 用 CSS 来 解决 问题 会 不 会 更 简明 快捷 。 


如 果 想 改变 某 个 元 素 的 呈现 效果 ， 使 用 CSS; 如 果 想 
改变 某 个 元 素 的 行为 ， 使 用 DOM; 如 果 你 想 根 据 某 
个 元 素 的 行为 去 改变 它 的 呈现 效果 ， 请 运用 你 的 智 

慧 ， 在 这 个 问题 上 没有 放 之 四 海 而 皆 准 的 答案 。 








9.4 className 属性 


FEA ABUL BH, 341] — BE fS HI DOM EL Be 
置 或 修改 样式 。 这 种 做 法 让 “行为 层 ” 干 “表示 层 ” 的 
活 ， 并 不 是 理想 的 工作 方式 。 如 有 果 你 改变 了 主意 ， 想 
换 换 那 些 由 DOM 脚 本 设置 的 样式 ， 就 不 得 不 埋头 于 
JavaScript 前 数 中 去 寻找 和 修改 与 设置 样式 有 关 的 语 
E. AA n] CAFE RE NE ET ABLES UR, ME 


这 里 有 一 种 简明 的 解决 方案 : 与 其 使 用 DOM 直 接 改 
变 某 个 元 素 的 样式 ， 不 如 通过 JavaScript 代 码 去 更 新 这 
个 元 素 的 class 属性 。 


大 家 看 看 styleHeaderSiblings 函数 是 如 何 添 加 样 
式 的 : 








function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document. getElementsByTagName("h1") ; 
var elem; 
for (var i=@; i«headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 


elem.style.fontWeight = "bold"; 
elem.style.fontSize - "1.2em"; 
} 
} 





如 有 果 决 定 把 紧 跟 在 一 级 标题 之 后 的 那个 元 素 的 CSS 字 
号 值 从 1.2em 改 为 1.4em， 你 就 不 得 不 去 修 
改 styleHeaderSiblings() 函数 。 


如 果 你 引用 一 个 外 部 CSS 样 式 表 ， 并 且 其 中 有 一 条 针 
对 .intro 类 的 样式 声明 : 


.intro { 





font-weight: bold; 
font-size: 1.2em; 


} 





现在 只 需 在 styleHeaderSiblings() 函数 里 把 紧 跟 
在 一 级 标题 之 后 的 那个 元 素 的 class 属性 设置 

为 intro 就 可 以 达到 同样 的 目的 。 

可 以 用 setAttribute 方法 来 做 这 件 事 : 


elem.setAttribute("class","intro"); 





更 简单 的 办 法 是 更 新 className 属性 。className 
T s 可 读 / 可 写 的 属性 ， 凡 是 元 素 节 点 都 有 这 
站 属性。 


你 可 以 用 className 属性 得 到 一 个 元 素 的 class 属 
性 : 








element.className 





用 className 属性 和 赋值 操作 符 设置 一 个 元 素 的 
class 属性 : 


element.className = value 





下 面 是 利用 className 属性 编写 出 来 的 
styleHeaderSiblings 函数 ， 它 在 设置 样式 时 不 需 


要 直接 与 style 属性 打交道 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document. getElementsByTagName("h1") ; 
var elem; 
for (var i=@; i«headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 


elem.className = "intro"; 


} 
} 





现在 ， 不 论 你 什么 时 候 想 改变 紧 跟 在 一 级 标题 之 后 的 
那个 元 素 的 样式 ， 只 需 在 CSS 里 修改 .intro 类 的 样 
式 声明 : 


.intro { 
font-weight: bold; 
font-size: 1.4em; 


} 





这 个 技巧 只 有 一 个 不 足 : 通过 className 属性 设置 某 
个 元 素 的 class 属性 时 将 蔡 换 (而 不 是 妃 加 〉 该 元 素 
原 有 的 class 设置 : 


<h1>Man bites dog</h1> 
<p class="disclaimer">This is not a true story</p> 





如 果 对 包含 以 上 标记 的 文档 使 
用 styleHeaderSiblings 函数 ， 那 个 “文本 段 " 元 素 
的 class 属性 将 从 disclaimer 被 替换 为 intro m 





这 里 实际 需要 的 是 “追加 ”效果 class 属性 应 该 变 
成 disclaimer intro, ， 也 就 是 disclaimer 和 


intro PJRUFESCESEHE J. 


你 可 以 利用 字符 串 拼接 操作 ， 把 新 的 class V ELIEDB 
加 到 className 属性 上 去 〈 请 注意 ，intro 的 第 一 个 
字符 是 空格 ) ， 如 下 所 示 : 


elem.className += " intro"; 








不 过 ， 实 际 上 你 只 希望 在 原来 确实 有 一 个 class 的 
情况 下 才 这 么 做 。 如 果 原 来 没有 任何 class ， 直 接 对 
className 属性 赋值 就 可 以 了 。 


在 需要 给 一 个 元 素 追 加 新 的 class 时 ， 你 可 以 按照 以 
下 步骤 操作 : 


(1) 检查 className 属性 的 值 是 否 为 nul1l ; 
(2) 如 果 是 ， 把 新 的 class 设置 值 直接 赋值 给 


className 属性 ; 


(3) 如 果 不 是 ， 把 一 个 空格 和 新 的 class 设置 值 追加 
到 className 属性 上 去 。 


你 可 以 把 以 上 步骤 封装 为 一 个 函数 addClass 。 这 个 
函数 带 两 个 参数 : 第 一 个 是 需要 添加 新 class 的 元 素 
(element ) ， 第 二 个 是 新 的 class 设置 值 (value 
) : 








function addClass(element,value) { 

if (!element.className) { 
element.className = value; 
else ( 
newClassName - element.className; 
newClassName+= " "; 
newClassName+= value; 
element.className - newClassName; 


Ww 


fEstyleHeaderSiblings 函数 里 调用 addClass rf 
数 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1") ; 
var elem; 
for (var i=@; i<headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 


addClass(elem,"intro"); 


j 
} 





你 也 可 以 更 新 一 下 stripeTables 函数 。 这 个 函数 现 
在 是 通过 直接 改变 奇数 表格 行 的 背景 颜色 来 实现 斑马 
线 效 果 的 : 





function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document. getElementsByTagName("table") ; 
var odd, rows; 
for (var i=@; i«tables.length; i++) { 
odd = false; 
rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j«rows.length; j++) { 
if (odd == true) ( 
rows[j].style.backgroundColor = "#ffc"; 


odd = false; 
} else { 
odd = true; 





先 在 format .css 文件 里 增加 一 条 对 应 于 
class-"odd" 的 样式 声明 : 


.odd { 
background-color: #ffc; 


} 





d 函数 ， 让 它 通 过 调 
用 addClass 函数 来 实现 同样 的 效果 : 


function stripeTables() ( 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
var odd, rows; 
for (var i20; i«tables.length; i++) { 
odd - false; 
rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j<rows.length; j++) { 
if (odd == true) ( 
addClass(rows[j],"odd") ; 


odd = false; 
} else { 
odd = true; 





最 终结 果 与 前 面 完 全 相同 。 区 别 在 于 现在 是 通过 CSS 
而 不 是 DOM 去 设置 样式 。JavaScript 函 数 现在 更 新 的 
cele Nene 属性 ， 根本 没 碰 style 属性 。 这 确保 了 

网 页 的 表示 层 和 行为 层 分 离 得 更 加 彻底 。 


函数 进行 抽象 
你 所 有 的 函数 部 工 作 得 很 好 ， 完 全 可 以 让 它们 保持 现 
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更 加 通用 。 把 一 个 非常 具体 的 东西 改进 为 一 个 较为 通 
用 的 东西 的 过 程 叫 做 抽象 Cabstraction) 。 


仔细 看 看 styleHeaderSiblings 函数 ， 就 会 发 现 它 
仅 适 用 于 hl 元 素 ， 而 且 classNeme 属性 值 intro 也 
是 硬 编码 在 函数 代码 里 的 : 





function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1") ; 
var elem; 
for (var i=0; i«headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 


addClass(elem,"intro"); 
} 
} 





把 这 些 具 体 的 值 转换 为 这 个 函数 的 参数 ， 就 可 以 让 它 
成 为 一 个 更 通用 的 函数 。 把 改进 后 的 新 函数 命名 
JjstyleElementSibling 并 给 它 增加 两 个 参数 

— —tag 和 theclass : 


function styleElementSiblings(tag,theclass) 
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变量 tag ， 再 把 字符 串 “intro” 全 部 替换 为 参数 变量 

theclass 。 为 了 增加 代码 的 可 读 性 ， 你 也 可 顺便 把 
原来 的 headers 变量 名 蔡 换 成 elems 以 增加 可 读 性 : 





function styleElementSiblings(tag,theclass) { 
if (!document.getElementsByTagName) return false; 
var elems = document. getElementsByTagName(tag) ; 
var elem; 
for (var i=@; i«elems.length; i++) { 


elem = getNextElement(elems[i].nextSibling) ; 
addClass(elem,theclass); 
} 
} 
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这 个 新 函数 ， 就 可 以 获得 原来 的 效果 : 


addloadEvent(function()( 
styleElementSiblings("h1","intro"); 
})3 





不 论 何 时 你 发 现 可 以 像 上 面 这 样 对 某 个 函数 进行 抽 
象 ， 都 应 该 马上 去 做 ， 这 总 是 一 个 好 主意 。 今 后 你 或 
许 会 需要 对 另 一 种 元 素 或 另 一 个 className 属性 值 进 
行 类 似 的 处 理 。 如 果真 是 那样 ， 那 就 是 写 一 
^*styleElementsiblings 通用 函数 的 最 好 时 机 。 


9.5 小结 


在 本 章 里 ， 你 看 到 了 DOM 完 整 全 新 的 一 面 。 此 前 介 
绍 的 DOM 方 法 和 属性 要 么 属于 DOM Core， 要 么 属于 
HTML-DOM。 本 章 介 绍 的 CSS-DOM 技 术 针 对 的 是 如 
何 得 到 ( 读 ) 和 设置 CS) style 对 象 的 各 种 属性 ， 
n zu 对 象 本 身 又 是 文档 中 的 每 个 元 素 节 点 都 具备 


style 属性 的 最 大 限制 是 它 不 支持 获取 外 部 CSS 设 置 
的 样式 。 但 你 仍 可 以 利用 style 属性 去 改变 各 种 
HTML 元 素 的 呈现 效果 。 这 在 我 们 无 法 或 是 难以 通过 
外 部 CSS 去 设置 样式 的 场合 非常 有 用 。 只 要 有 可 能 ， 
就 应 选择 更 新 className 属性 ， 而 不 是 去 直接 更 新 
style 对 象 的 有 关 属 性 。 


在 本 章 里 ， 我 们 向 大 家 介绍 了 以 下 几 种 CSS-DOM 技 
术 的 具体 应 用 示例 。 


。 根据 元 素 在 节点 树 里 的 位 置 设置 它们 的 样式 
(styleHeaderSiblings 函数 ) 。 

。 通 有 历 一 个 节点 集合 设置 有 关 元 素 的 样式 
(stripeTables 函数 ) 。 

。 在 事件 发 生 时 设置 有 关 元 素 的 样式 
(highlightRows 函数 ) 。 


这 几 种 应 用 都 属于 用 JavaScript 入 侵 CSS 领 地 的 情况 ， 

而 我 们 这 么 做 的 理由 不 外 乎 两 点 : 其 一 是 CSS 无 法 让 
我 们 找到 想 要 处 理 的 目标 元 素 ， 其 二 是 用 CSS 寻 找 目 
标 元 素 的 办 法 还 未 得 到 广泛 的 支持 。 或 许 ， 未 来 的 

CSS 技 术 能 够 让 我 们 远离 这 种 “不 务 正业 ”的 DOM 脚 本 
编程 技术 。 


不 过 ， 有 一 种 应 用 大 概 是 CSS 永 远 也 无 法 与 DOM 竞 争 
HJ: JavaScript 脚 本 能 定时 重复 执行 一 组 操作 。 通 过 不 
断 改变 样式 ， 我 们 就 能 实现 CSS 根 本 不 可 能 实现 的 效 
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在 下 一 章 里 ， 你 会 看 到 一 个 这 样 的 例子 。 你 将 写 一 个 
能 够 随 着 时 间 的 推移 而 不 断 刷 新 元 素 位 置 的 函数 。 简 
单 地 说 ， 你 将 用 JavaScript 实 现 动画 效果 。 





10% 用 JavaScript 实 
现 动画 效果 
本 章 内 容 


e 动画 基础 知识 
。 用 动画 丰富 网 页 的 浏览 效果 


在 本 章 里 ， 你 将 看 到 CSS-DOM 技 术 最 富 于 动感 的 应 
用 之 一 : 让 网 页 上 的 元 素 动 起 来 。 














10.1 动画 基础 知识 


前 面 的 章节 介绍 了 如 何 利 用 DOM 技 术 修改 文档 的 样 
式 信 息 。 用 JavaScript 添 加 样式 信息 可 以 节约 你 的 时 间 
和 精力 ， 但 总 的 来 说 ，CSS 仍 是 完成 这 类 任务 的 最 佳 
apes 


不 过 ， 有 一 个 应 用 领域 是 目前 的 CSS 疝 且 无 能 为 力 
的 。 如 果 我 们 想 随 着 时 间 的 变化 而 不 断 改 变 某 个 元 素 
的 样式 ， 则 只 能 使 用 JavaScript。JavaScript 能 够 按照 
预定 的 时 间 间 隔 重 复 调 用 一 个 函数 ， 而 这 意味 着 我 们 
可 以 随 着 时 间 的 推移 而 不 断 改变 某 个 元 素 的 样式 。 


动画 是 样式 随时 间 变 化 的 完美 例子 之 一 。 简 单 地 说 ， 
动画 就 是 让 元 系 的 位 置 随 着 时 间 而 不 断 地 发 生变 化 。 

















10.1.1 位 置 


网 页 元 素 在 浏览 紫 窗 口 里 的 位 置 是 一 种 表示 性 的 信 
恩 。 因 此 ， 位 置信 息 通 第 是 由 CSS 人 负责 设置 的 。 下 面 
这 些 CSS 人 代码 对 茶 个 元 素 在 网 页 上 的 位 置 做 出 了 规 
定 : 











element { 
position: absolute; 
top: 50px; 
left: 100px; 


} 





这 将 把 element TAERE ANI as a OA 
界 100 像 素 ， 距 离 浏 览 器 窗口 的 上 边界 50 像 素 的 位 置 
上 。 下 面 是 实现 同样 效果 的 DOM 代 码 : 








element.style.position = "absolute"; 
element.style.left = "100px"; 


element.style.top = "50px"; 


position 属性 的 合法 值 有 static 、fixed 
、relative 和 absolute 四 种 。static 

是 position 属性 的 默认 值 ， 意 思 是 有 关 元 素 将 按照 
它们 在 标记 里 出 现 的 先后 顺序 出 现在 浏览 器 窗口 

里 。relative 的 含义 与 static 相似 ， 区 别 

是 position 属性 等 于 relative 的 元 素 还 可 以 ( 通 
Lee 属性 〉 从 文档 的 正常 显示 顺序 里 脱离 出 

















如 果 把 某 个 元 素 的 position 属性 设置 为 absolute 

， 我 们 就 可 以 把 它 捍 放 到 容纳 它 的 “容器 ”的 任何 位 
置 。 这 个 容器 要 么 是 文档 本 身 ， 要 么 是 一 个 有 着 
fixed 或 absolute 属性 的 父 元 素 。 这 个 元 素 在 原始 
标记 里 出 现 的 位 置 与 它 的 显示 位 置 无 关 ， 因 为 它 的 显 
示 位 置 由 top left. right 和 bottom 等 属性 决 
a 以 使 用 像素 或 百分比 作为 单位 设置 这 些 属性 








设置 一 个 元 素 的 top 属性 将 把 该 元 素 摆 放 到 距 文档 项 
特定 距离 的 位 置 ， 一 个 元 素 的 bottom 属性 将 把 该 元 
素 摆 放 到 距 文 档 底 边 界 特定 距离 的 位 置 。 类 似 

Jh, left 或 right 属性 可 用 来 分 别 把 该 元 素 摆 放 到 
距 文 档 左 边界 或 右边 界 特定 距离 的 位 置 。 为 防止 它们 
发 生 冲 突 ， 最 好 只 使 用 top 或 只 使 用 bottom 属 

PE; left 或 right 属性 也 是 如 此 。 


把 文档 里 的 茶 个 元 和 际 摆 放 到 一 个 特定 的 位 置 是 很 容易 
的 事 。 不 妨 假设 有 一 个 这 样 的 元 素 : 


«p id="message">Whee! </p> 


于 是 ， 你 可 以 用 一 个 JavaScript 函 数 来 设置 这 个 元 素 的 
位 置 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false 
var elem - document.getElementById("message"); 
elem.style.position - "absolute"; 


elem.style.left = "50px"; 
elem.style.top = "100px"; 





在 页 面 加 载 时 调用 这 个 positionMessage KZ, 4 
把 这 段 文 本 摆 放 到 距 浏览 器 窗口 的 左边 界 50 像 系 、 中 8 
浏览 器 窗口 的 项 边界 100 像 素 的 位 置 : 


window.onload = positionMessage; 





不 过 ， 最 好 是 用 addLoadEvent 函数 来 完成 ， 如 下 所 


Z^: 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload !- 'function') ( 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 
func(); 


} 


} 


addLoadEvent(positionMessage); 





图 10-1 是 按 position="absolute" 的 情况 来 摆 放 这 
个 元 素 的 效果 。 


Animation 








图 10-1 


改变 某 个 元 素 的 位 置 也 很 简单 ， 只 要 执行 一 个 函数 去 
改变 这 个 元 素 的 style.top 或 style.left 等 属性 就 
行 了 : 





function moveMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false 
var elem = document.getElementById("message"); 


elem.style.left = "200px"; 





编写 一 个 这 样 的 函数 并 不 难 ， 问 题 是 该 如 何 去 调用 这 
个 函数 昵 ? 如 果 让 moveMessage 函数 在 页 面 加 载 时 
运行 ， 这 个 元 素 的 位 置 将 立刻 发 生变 化 
由 positionMessage 函数 给 出 的 原始 位 置 会 被 立刻 
T i: 


addLoadEvent(positionMessage); 











addLoadEvent (moveMessage) ; 


"MN 





Animation 








图 10-2 


元 素 的 显示 位 置 立 刻 发 生变 化 并 不 是 我 们 想 要 的 动 男 
效果 。 要 获得 真正 的 动画 效果 ， 必 须 让 元 素 的 位 置 随 
着 时 间 不 断 地 发 生变 化 。 


导致 元 素 的 显示 位 置 立刻 发 生变 化 的 根源 是 JavaScript 
太 有 效率 了 : 函数 一 个 接 一 个 地 执行 ， 其 间 根 本 没有 
我 们 所 能 察觉 的 间隔 。 为 了 实现 动画 效果 ， 我 们 必 

须 “ 创 造 ?出 时 间 间 隅 来 ， 而 这 正 是 我 们 将 要 探讨 的 问 


jel 























10.1.2 时间 


JavaScript Zt setTimeout 能 够 让 某 个 函数 在 经 过 一 
段 预 定 的 时 间 之 后 才 开 始 执行 。 这 个 函数 融 有 两 个 参 
NX: 第 一 个 参数 通常 是 一 个 字符 串 ， 其 内 容 是 将 要 执 


行 的 那个 函数 的 名 字 ; 第 二 个 参数 是 一 个 数值 ， 它 以 
坚 秒 为 单位 设 定 了 需要 经 过 多 长 时 间 后 才 开 始 执 行 第 
一 个 参数 所 给 出 的 函数 : 


setTimeout("function",interval) 





在 绝 大 多 数 时 候 ， 把 这 个 函数 调用 赋值 给 一 个 变量 将 


是 个 好 主意 : 


variable = setTimeout("function",interval) 





如 果 想 取消 某 个 正在 排队 等 待 执行 的 函数 ， 就 必须 事 
先 像 上 面 这 样 把 setTimeout MANIK AMAA 
个 变量 。 你 可 以 用 一 个 名 为 clearTimeout 的 函数 来 
取消 “等 待 执行 ”队列 里 的 某 个 函数 。 这 个 函数 需要 一 
1 tee cries 函数 调用 返回 值 
^J AE ER: 


clearTimeout(variable) 





修改 positionMessage 函数 ， 让 它 在 5 秒 (或 者 说 
5000 毫 秒 ) 之 后 才 去 调用 moveMessage PF X: 





function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false 
var elem = document.getElementById("message"); 
elem.style.position = "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
movement - setTimeout("moveMessage()",5000); 


ee 


positionMessage 函数 仍 将 在 页 面 加 载 时 得 到 执 
T: 


addLoadEvent(positionMessage); 


这 样 一 来 ， 那 条 消息 将 先 出 现在 它 的 原始 位 置 上 ， 然 
后 在 5 秒 之 后 才 辐 右 “ 跳 跃 2150 像 素 。 


在 那 5 秒 钟 的 等 待 时 间 里 ， 我 可 以 随时 使 用 下 面 这 条 
语句 取消 这 一 “跳跃 ”行为 : 


clearTimeout (movement); 


movement 变量 对 应 着 在 positionMessage KAHE E 
义 的 setTimeout 调用 。 它 是 一 个 全 局 变量 ， 我 在 声 
明 它 时 未 使 用 关键 字 var 。 这 意味 着 那个 “跳跃 行为 
可 以 在 positionMessage 函数 以 外 的 地 方 被 取消 。 











10.1.3 时间 递 增 量 


把 茶 个 元 素 在 5 秒 钟 之 后 同 右 移动 150 像 素 的 显示 效果 
称 为 动画 实在 有 点 儿 勉 强 。 真 正 的 动画 效果 是 一 个 渐 
变 的 过 程 ， 元 系 应 该 从 出 发 点 逐步 地 移动 到 目的 地 ， 
而 不 是 从 出 发 点 一 下 子 跳 跃 到 目的 地 。 


我 们 更 新 一 下 moveMessage 函数 ， 让 元 素 的 移动 以 
下 面 是 新 moveMessage 函数 的 逻 
8. 








(1) 获得 元 素 的 当前 位 置 。 
(2) 如 采 元 素 已 经 到 达 它 的 目的 地 ， 则 退出 这 个 函 


(3) 如 果 元 素 尚 未 到 达 它 的 目的 地 ， 则 把 它 同 目的 地 
移 近 一 点 儿 。 


(4) 经 过 一 段 时 间 间 隔 之 后 从 步 又 1 开始 重复 上 述 步 


又 。 


第 一 步 是 确定 元 素 的 当前 位 置 。 这 一 点 可 以 通过 查询 
元 素 的 style .top 和 style.left 等 位 置 属性 做 到 。 
我 们 把 style.1left 和 style.top 属性 的 值 分 别 赋 给 
变量 xpos 和 ypos : 





var xpos = elem.style.left; 
var ypos = elem.style.top; 





“4moveMessage 图 数 在 positionMessage 函数 之 后 
被 调用 时 ，xpos 变量 将 被 赋值 为 50px，ypos 变量 将 
被 赋值 为 100px。 我 遇 到 了 一 点 儿 小 采 烦 : 这 两 个 值 
都 是 字符 串 ， 而 接 下 来 的 代码 需 要 进行 许多 算术 比较 
操作 。 我 需要 的 是 数 ， 不 是 字符 串 。 
JavaScript 函 数 parseInt 可 以 把 字符 串 里 的 数值 信息 
提取 出 来 。 如 果 把 一 个 以 数字 开头 的 字符 串 传 递 给 这 
个 函数 ， 它 将 返回 一 个 数值 : 


parseInt(string) 


下 面 是 一 个 例子 : 





parseInt("39 steps"); 





这 个 函数 调用 将 返回 数值 “39”( 不 包括 引号 ) 。 
parseInt 函数 的 返回 值 通常 是 整数 。 如 果 需 要 提取 


的 是 带 小 数 点 的 数值 〈 也 就 是 浮 点 数 ) ， 就 应 该 使 用 
相应 的 parseFloat P Zi: 


parseFloat(string) 





我 们 在 moveMessage 函数 里 只 与 整数 打交道 ， 所 以 
使 用 parseInt 函数 : 


parseInt(elem.style.left); 
parseInt(elem.style.top); 





parseInt 函数 将 把 字符 捉 “50px” 转 换 为 整数 50， 把 
字符 串 “100px” 转 换 为 整数 100。 现 在 ，xpos 和 ypos 
变量 分 别 包含 整数 50 和 100。 


注意 ”只 有 使 用 了 DOM 脚 本 或 style 属性 为 元 
素 分 配 了 位 置 后 ， 这 里 的 parselnt 函数 才 起 作 
用 。 


在 moveMessage 函数 里 ， 接 下 来 的 几 个 步骤 需要 用 
到 大 量 的 比较 操作 符 。 


第 一 次 测试 是 否 相等 ， 我 们 需要 知道 变量 xpos 和 
ypos 的 值 是 否 等 于 目的 地 那里 的 “ 左 ” 位 置 和 “上 ”位 
置 。 如 果 是 ， 退 出 这 个 函数 。 相 等 操作 符 由 两 个 等 号 
构成 。( 记 住 ， 一 个 等 号 是 赋值 。) 














if (xpos == 200 && ypos == 100) { 
return true; 


} 





aij message 元 素 还 没有 到 达 它 的 目的 地 ， 则 继续 执 
行 下 面 的 代码 。 


接 下 来 ， 根 据 message 元 素 的 当前 位 置 及 其 目的 地 的 
关系 更 新 变量 xpos 和 ypos 的 值 。 我 们 希望 把 它们 移 
动 到 一 个 距 目 的 坐标 更 近 的 地 方 。 如 果 xpos 小 于 终 
点 的 left ， 给 它 加 1: 


if (xpos < 200) { 
Xpos++; 


} 





如 果 xpos 大 于 终点 的 left ， 给 它 减 1 : 


if (xpos > 200) ( 
xpos--; 


} 





根据 ypos 的 值 和 终点 top 的 关系 ， 对 变量 ypos 进行 
类 似 的 更 新 : 





if (ypos < 100) { 
ypos++; 

} 

if (ypos > 100) { 
ypos--; 

} 


PO 


现在 ， 你 知道 把 变量 xpos 和 ypos 由 字符 串 转换 为 数 
的 原因 了 : 我 要 用 大 于 和 小 于 操作 符 进 行 数值 比较 ， 
并 根据 比较 的 结果 更 新 它们 的 值 。 


接 下 来 ， 需 要 把 变量 xpos 和 ypos 的 值 应 用 

到 message 元 素 的 style 属性 。 我 们 需要 把 字符 
串 “px ”追加 到 这 两 个 值 的 来 尾 ， 并 把 它们 赋 给 left 
Alltop 属性 : 





elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 





最 后 ， 我 们 需要 在 一 个 短暂 的 停顿 之 后 重复 执行 这 个 
函数 。 我 们 把 停顿 时 间 设 置 为 日 分 之 一 秒 ， 也 就 是 10 


ZH: 


movement = setTimeout("moveMessage()",10); 





下 面 是 moveMessage 函数 的 代码 清单 : 





function moveMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false 
var elem - document.getElementById("message"); 


var xpos = parseInt(elem.style.left); 
var ypos = parseInt(elem.style.top); 
if (xpos == 200 && ypos == 100) { 
return true; 
j 
if (xpos « 200) ( 
Xpos++; 
} 
if (xpos > 200) { 
xpos--; 


if (ypos « 100) ( 
ypos++; 
} 
if (ypos > 100) ( 
ypos--; 
} 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
movement = setTimeout("moveMessage()",10); 





这 个 函数 使 得 message 元 素 以 每 次 1 像素 的 方式 在 浏 
览 器 窗口 里 移动 。 一 旦 这 个 元 素 的 top 和 left 属性 
同时 等 于 100px 和 200px， 这 个 函数 就 停止 执行 。 这 可 








是 实 实在 在 的 动画 效果 一 一 虽然 它 没 有 什么 实际 的 意 
义 。 稍 后 ， 我 们 将 利用 同样 的 原理 实现 一 个 有 实用 价 
值 的 例子 。 


10.1.4 抽象 


刚才 编写 的 moveMessage 函数 只 能 完成 一 项 非常 特 
定 的 任务 。 它 将 把 一 个 特定 的 元 素 移动 到 一 个 特定 的 
位 置 ， 两 次 移动 之 间 的 停顿 时 间 也 是 一 段 固定 的 长 
度 。 所 有 这 些 信 息 都 是 硬 编码 在 函数 代码 里 的 ; 




















function moveMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message") 


) 
return false; 
var elem - document.getElementById("message") 


3 


var xpos = parseInt(elem.style.left); 


var ypos = parseInt(elem.style.top); 
if (xpos == 200 


&& ypos == 100 


) 1 


} 
if (xpos < 200 


return true; 


) 1 


} 
if (xpos > 200 


Xpos++; 


) 1 


} 
if (ypos < 100 


xpos--; 


) 1 


} 
if (ypos > 100 


ypos++t+; 


) 1 
} 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
movement = setTimeout("moveMessage()",10 


ypos--; 





Jp REO ES S BABA ee, KS RAY R 1 PEA 
用 范围 惑 会 大 大 提高 。 通 过 对 moveMessage 函数 进 
行 抽 象 ， 你 可 以 让 它 变 得 更 加 通用 《便于 重用 ) 。 
a. 创建 moveElement 函数 
把 新 函数 命名 为 moveELement . 
与 noveMessage 函数 不 同 ， 新 函数 的 参数 将 会 
有 多 个 。 下 面 是 每 次 调用 这 个 新 函数 时 可 能 变化 
的 东西 。 
(1) 打算 移动 的 元 素 的 ID 。 
(2) 该 元 素 的 目的 地 的 “ 左 ” 位 置 。 
(3) 该 元 素 的 目的 地 的 “上 ”位 置 。 
(4) 两 次 移动 之 间 的 停顿 时 间 。 
这 些 参数 都 应 该 取 一 个 描述 性 的 名 字 : 
(1) elementID 
(2) final x 
(3) final y 
(4) interval 


4E X moveElement 函数 的 第 一 步 是 声明 它 的 各 
个 参数 : 


function moveElement(elementID,final x,final y,int& 


用 这 些 变 量 把 前 面 硬 编码 在 moveMessage 函数 


FINA eB I.T. FEmoveMessage Hf 
数 的 开头 是 以 下 几 条 语句 : 


if (!document.getElementById) return false; 
if (!document.getElementById("message")) return fa 
var elem = document.getElementById("message"); 





把 这 几 条 语句 里 的 
getElementById("message") 全 部 替换 
AgetElementById (elementID) : 


if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return fa 
var elem = document.getElementById(elementID); 








elem 变量 现在 对 应 着 你 想 移动 的 任何 元 素 。 


接 下 来 的 两 行 语 句 用 不 着 修改 。 它 们 负责 把 给 定 
元 素 的 left 和 top 属性 转换 为 数值 ， 并 把 转换 
结果 分 别 赋 值 给 变量 xpos 和 ypos : 





var xpos = parseInt(elem.style.left); 
var ypos = parseInt(elem.style.top); 











fe ROK, MAA ICR A CASA AH. 
fEmoveMessage 函数 里 ， 目 的 地 的 坐标 值 是 
200 (left 位 置 ) #100 (top 位 置 ) 。 





if (xpos == 200 && ypos == 100) { 
return true; 


} 


po 


在 moveElement 函数 里 ， 目 的 地 坐标 值 将 由 变 
量 final x 和 final_y 提供 : 


if (xpos == final_x && ypos == final_y) { 
return true; 


} 





再 往 后 是 对 变量 xpos 和 ypos 进行 刷新 的 几 条 语 
句 。 如 果 变 量 xpos 的 值 小 于 目的 地 的 “ 左 ?位 
置 ， 给 它 加 1。 


原来 的 目的 地 的 left 位 置 是 硬 编码 在 函数 代码 
里 的 常数 200: 





if (xpos < 200) { 
Xpos++; 


} 





现在 的 目的 地 的 left 位 置 由 变量 final_x 提 
if (xpos < final_x) { 


Xpos++; 


} 





类 似 地 ， 如 果 xpos 大 于 目的 地 的 left 位 
置 ，xpos 减 1: 


if (xpos > final_x) { 


xpos--; 





对 负 贡 更 新 变量 ypos 的 语句 做 同样 的 修改 。 如 
果 ypos 小 于 final_y ， 给 它 加 1; 如 果 它 大 于 
final_y ， 给 它 减 1: 


if (ypos < final y) { 
ypos++; 

} 

if (ypos > final_y) { 
ypos--; 

} 








接 下 来 的 两 行 语句 不 用 修改 。 它 们 负责 把 字符 
px" 追加 到 变量 xpos 和 ypos 的 末尾 ， 并 将 
其 赋值 给 elem 元 素 的 left 和 top 样式 属性 : 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 








最 后 ， 在 经 过 一 段 适当 的 时 间 间 隔 之 后 再 次 调用 
同一 个 函数 。 在 moveMessage 函数 里 ， 这 个 环 
HAUSSA: FE 1022 ii H] —?KmoveMessage 
函数 : 


movement = setTimeout("moveMessage()",10); 














fEmoveElement 函数 里 ， 事 情 变 得 有 一 点 儿 复 


杂 。 因 为 在 下 一 次 调用 moveElement 时 ， 我 们 
还 需要 把 elementID final x. final y 和 
interval 等 参数 传 给 它 。 这 将 形成 一 个 如 下 所 
示 的 字符 串 : 


"moveElement('"+elementID+"' ,"+final_x+","+final_y 





字符 串 拼 接 操作 实在 不 少 ! 与 其 把 一 个 这 么 长 的 
字符 串 直接 插入 到 setTimeout 函数 里 去 ， 不 如 
先 把 这 个 字符 串 赋值 给 repeat 变量 : 


var repeat = "moveElement('"+elementID+"',"+final_» 





现在 ， 我 们 只 需 把 repeat 变量 插入 

到 setTimeout 函数 里 作为 它 的 第 一 个 参数 就 行 
了 。 第 二 个 参数 是 再 次 调用 第 一 个 参数 所 指定 的 
函数 之 前 需要 等 待 的 时 间 间 隔 。 这 个 间隔 

在 moveMessage 函数 里 被 便 编 码 为 10 坚 秒 ， 它 
现在 将 由 变量 interval 提供 : 


movement = setTimeout(repeat,interval); 





用 一 个 右 花 括号 络 束 这 个 函数 : 


} 


下 面 是 moveElement 函数 的 代码 清单 : 


function moveElement(elementID,final x,final y,int& 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return f 
var elem - document.getElementById(elementID); 
var xpos parselInt(elem.style.left); 
var ypos parselInt(elem.style.top); 
if (xpos == final x && ypos == final y) ( 
return true; 
} 
if (xpos « final x) ( 
XpOS++3; 
} 
if (xpos > final x) ( 
xpos--; 
} 
if (ypos < final_y) { 
ypos++; 
} 
if (ypos > final_y) { 
ypos--; 
} 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
var repeat = "moveElement('"+elementID+"' ,"+fina 
movement = setTimeout (repeat, interval) ; 





把 moveElement 函数 保存 为 noveElement .js 
文件 。 把 这 个 文件 放 入 scripts XFX, AWE SL 
把 addLoadEvent.js 文件 也 放 到 那里 。 

. 使 用 moveElement 函数 

现在 ， 我 们 来 测试 一 下 这 个 函数 。 

首先 重新 创建 前 面 的 示例 ， 创 建 一 个 名 


为 message.html 的 文档 ， 让 它 包含 一 个 id 属性 
值 是 message 的 文本 段 : 


<!DOCTYPE html» 
«html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee! </p> 
</body> 
</html> 





要 想 看 到 动画 效果 ， 我 们 必须 先 设 定 它 的 初始 位 
置 。 编 写 一 个 名 为 positionMessage.js 的 
JavaScript 文 件 。 在 positionMessage 函数 的 末 
尾 ， 调 用 moveELement 函数 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return f 
var elem - document.getElementById("message"); 
elem.style.position - "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement ("message", 200,100,10) ; 


addLoadEvent (positionMessage) ; 





上 面 这 段 代 码 中 的 moveElement 函数 调用 语句 
将 把 字符 串 值 “message” 传 递 给 elementID & 

数 ， 把 数值 200 传 递 给 final_x 参数， 把 数值 100 
传递 给 final_y 参数 ， 把 数值 10 传 递 给 
interval 参数 。 


scripts 文件 夹 现 在 包含 三 个 文 

件 : addLoadEvent.js 

. positionMessage.js 和 和 moveElement.js。 
我 们 需要 在 message.html 文档 里 插入 一 些 
«script» 标签 来 引用 这 几 个 脚本 文件 ， 如 下 所 





7h: 


<!DOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /» 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee! </p> 
«script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/positionMessage.js"></script 
«script src="scripts/moveElement.js"></script> 
</body> 
</html> 





现在 ， 把 message.html 文档 加 载 到 一 个 Web 浏 
唤 器 里 就 可 以 看 到 我 们 所 实现 的 动画 效果 了 ， 如 
图 10-3 所 示 ， 那 个 元 素 将 在 浏览 器 窗口 里 横 问 移 
动 。 
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图 10-3 


至 此 ， 一 切 都 进行 得 很 顺利 。moveElement pk 
数 与 noveMessage 函数 的 效果 完全 一 样 。 不 

过 ， 因 为 我 们 已 经 对 这 个 函数 进行 过 抽象 处 理 ， 
所 以 现在 可 以 把 任意 的 参数 传递 给 它 。 比 如 说 ， 
如 果 改 变 参数 final_x 和 final_y 的 值 ， 就 可 以 


改变 动画 的 移动 方向 ， 如 果 改 变 参 数 interval 
的 值 ， 就 可 以 改变 动画 的 移动 速度 : 


function moveElement(elementID,final x,final y,int& 





fEpositionMessage.js 文件 里 修 
改 positionMessage 函数 的 最 后 一 行 ， 让 这 三 
^ MEAE LZR: 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return f 
var elem - document.getElementById("message"); 
elem.style.position - "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement("message",125,25,20); 


addLoadEvent (positionMessage) ; 





在 web 浏览 器 里 刷新 message.html 文件 ， 就 可 
以 看 到 新 的 动画 效果 了 : 那个 元 素 现在 将 斜 向 移 
动 ， 移 动 的 速度 也 变 慢 了 ， 如 图 10-4 所 示 。 
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图 10-4 


还 可 以 改变 moveElement 函数 的 elementID & 
数值 : 


function moveElement(elementID,final x,final y,int& 





fEmessage.html 文件 里 增加 一 个 新 元 素 ， 把 它 
的 id 属性 设置 为 message2 : 





<!DOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee! </p> 
<p id="message2">Whoa! </p> 
<script src="scripts/addLoadEvent.js"></script> 
«script src-"scripts/positionMessage.js"»«/scrip 
«script src-"scripts/moveElement.js"»«/script» 
«/body» 
«/html» 


[| 


现在 ， 在 positionMessage.js 文件 里 增加 一 些 
代码 。 先 为 message2 元 素 设 定 一 个 初始 位 置 ， 
然后 增加 一 条 moveElement 函数 调用 语句 
把 message2 作为 它 的 第 一 个 参数 传递 : 





function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return f 
var elem - document.getElementById("message"); 
elem.style.position - "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement("message",125,25,20); 
if (!document.getElementById("message2")) return 
var elem - document.getElementById("message2"); 
elem.style.position - "absolute"; 
elem.style.left = "50px"; 
elem.style.top - "50px"; 
moveElement("message2",125,125,20); 

} 


addLoadEvent (positionMessage) ; 





在 web 浏览 器 里 刷新 message.html 文件 就 可 以 
看 到 新 的 动画 效果 了 ， 如 图 10-5 所 示 。 两 个 元 素 
将 沿 着 不 同 的 方 同 同时 移动 。 
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图 10-5 


在 这 两 个 例 了 里， 所 有 工作 都 是 moveElement 
函数 完成 的 。 只 需 简 单 地 改变 一 下 传递 给 这 个 函 
数 的 参数 值 ， 你 就 可 以 随意 重用 它 。 这 正 是 用 参 
数 变 量 代 蔡 硬 编码 常数 的 最 大 好 处 。 





« 10.2 ”实用 的 动画 


有 了 moveElement 这 个 通用 的 函数 ， 你 就 可 以 
用 它 沿 任 意 方 同 移动 页 面 元 素 。 从 程序 设计 的 角 
度 看 ， 这 会 给 人 留 下 相当 深刻 的 印象 ;但 从 实用 
的 角度 看 ， 它 的 意义 似乎 并 不 大 。 


网 页 上 的 动画 元 素 不 仅 容 易 引 起 访问 者 的 反感 ， 
还 容易 导致 各 种 各 样 的 可 访问 性 问题 。W3C 在 它 
们 的 Web Content Accessibility Guidelines (Web 
内 容 可 访问 性 指南 ) 7.2 节 里 给 出 了 这 样 的 建 
议 :“ 除 非 浏览 器 允许 用 户 “ 冻 结 ” 移 动 着 的 内 
容 ， 人 否则 就 应 该 避免 让 内 容 在 页 面 中 移动 。《〈 优 
先 级 2) 。 如 果 页 面 上 有 移动 着 的 内 容 ， 就 应 该 
用 脚本 或 插件 的 机 制 允 许 用 户 冻 结 这 种 移动 或 动 
态 更 新 行为 。” 


这 里 的 关键 在 于 用 户 能 不 能 控制 。 解 决 了 这 个 问 
题 ， 根 据 用 户 行 为 移动 一 个 页 面 元 系 可 能 起 到 增 
强 网 页 的 效果 。 让 我 们 看 一 个 能 够 起 到 增强 页 面 
效果 的 例子 。 








10.2.1 提出 问题 


我 们 有 一 个 包含 一 系列 链接 的 网 页 。 当 用 户 把 鼠 
标 指针 巧 停 在 其 中 的 茶 个 链接 上 时 ， 我 们 想 用 一 
种 先睹为快 的 方式 告诉 用 户 这 个 链接 将 把 他 们 带 
往 何 方 。 我 们 可 以 展示 一 张 预览 图 片 。 


这 个 网 页 的 基本 文档 是 1ist tml 文件 ， 下 面 是 
它 的 代码 清单 : 








<!DOCTYPE html» 

«html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 


</head> 
<body> 
<hi>Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
«li» 
«a hrefz"structure.html"»Structure«/a» 
</li> 
<li> 
<a href="presentation.html">Presentation</a> 
</li> 
<li> 
«a hrefz"behavior.html"»Behavior«/a» 
</li> 
</ol> 
</body> 
</html> 





这 个 网 页 里 的 每 个 链接 分 别 指 癌 一 个 介绍 相关 网 
页 设计 技巧 的 页 面 。 这 些 链 接 内 文本 已 经 简单 介 
绍 了 目标 页 面 的 内 容 〈( 如 图 10-6 所 示 )。 
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K| 10-6 

事实 上 这 个 网 页 已 经 足够 完美 。 也 就 是 说 ， 为 它 
增加 一 种 视觉 提示 效果 会 让 这 个 网 页 更 有 吸引 
zs 


从 茶 种 意义 上 讲 ， 这 个 案例 与 我 们 在 本 书 前 面 的 





有 关 章 节 里 实现 的 图 片 库 颇 为 相似 ， 它们 都 包含 
着 一 系列 链接 ， 我 想 对 它们 做 的 改进 都 是 显示 一 
张 图 片 。 但 我 们 这 一 次 要 在 onmouseover 事件 

a 不 是 onclick 事件 ) 被 触发 时 显示 一 
张 图 片 。 


我 们 将 沿用 图 片 库 案例 中 的 脚本 
链接 上 的 事件 处 理 函数 从 onclick 改 

为 onmouseover 。 它 能 工作 ， 但 图 片 显 示 得 不 
够 流畅 : 当 用 户 第 一 次 把 鼠标 指针 悬 停 在 某 个 链 
接 上 时 ， 新 图 片 将 被 加 载 过 去 。 即 使 是 在 一 个 高 
速 的 网 络 连接 上 ， 这 多 少 也 雷 要 花费 点 儿 时 间 ， 
而 我 们 希望 能 够 立刻 响应 。 


只 需 把 每 个 








10.2.2 解决 问题 


如 果 为 每 个 链接 分 别 准备 一 张 预 览 图 片 ， 在 切换 
显示 这 些 图 片 时 总 会 有 一 些 延 运 。 除 此 之 外 ， 简 
单 地 切换 显示 这 些 图 片 也 不 是 我 们 期 望 的 效果 。 
我 们 想 要 的 是 一 种 更 快 更 好 的 东西 。 


下 面 是 我 们 要 做 的 事情 。 
* AFTA E nt Ede ENTER 
。 隐 藏 这 张 “ 集 体 照 "图 片 的 绝 大 部 分 。 

。 当 用 户 把 鼠标 指针 悬 停 在 某 个 链接 的 上 方 
时 ， 只 显示 这 张 "集体 照 > 图 片 的 相应 部 分 。 
我 已 经 制作 出 了 一 张 这 样 的 “集体 照 * 图 片 ， 它 由 


三 张 预览 图 片 和 一 张 默认 图 片 构成 ， 如 图 10-7 所 
ZN o 
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图 10-7 


这 个 图 片 的 文件 名 是 topics.gif 。 它 的 宽度 是 
400 像 素 ， 高 度 是 100 像 素 。 


我 们 把 topics.gif 图 片 插入 到 1ist.html 文档 
里 ， 并 把 这 个 图 片 元 素 的 id 属性 设置 为 preview 


<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 
</head> 
<body> 
«hi»Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
«li» 
«a hrefz"structure.html"»Structure«/a» 


«/li» 


«li» 
«a hrefz"presentation.html"»Presentation«/a» 
</li> 
<li> 
«a hrefz"behavior.html"»Behavior«/a» 
</li> 
</ol> 
<img src="images/topics.gif" alt="building blockş 
</body> 
</html> 





图 10-8 是 带 关 那些 链接 和 那 张 “集体 照 ” 图 片 的 网 
页 显示 效果 。 
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图 10-8 


现在 ， 整 张 集 体 照 ”图 片 都 是 可 见 的 。 每 次 我 们 
都 只 想 让 这 个 图 片 的 某 个 100x100 像 素 的 部 分 出 

现 。 我 们 无 法 用 JavaScript 做 到 这 一 点 ， 但 可 以 用 
CSS 来 做 。 


10.2.3 CSS 


CSS 的 overflow 属性 用 来 处 理 一 个 元 素 的 尺寸 
超出 其 容器 尺寸 的 情况 。 当 一 个 元 素 包 含 的 内 容 
超出 自身 的 大 小 时 ， 就 会 发 生 内 容 溢出 ， 这 种 情 
况 ， 你 可 以 对 内 容 进 行 “ 裁 剪 ”， 只 让 一 部 分 内 容 
可 见 。 你 还 可 以 通过 overflow 属性 告诉 浏览 器 
是 否 需 要 显示 滚动 条 ， 以 便 让 用 户 能 够 看 到 内 容 
的 其 余部 分 。 


overflow 属性 的 可 取 值 有 4 种 : visible 
、hidden 、scroll 和 auto . 








e visible: 不 裁剪 溢出 的 内 容 。 浏 览 器 将 把 
溢出 的 内 容 呈 现在 其 容器 元 素 的 显示 区 域 以 
外 ， 全 部 内 容 都 可 见 。 

e hidden: 隐藏 溢出 的 内 容 。 内 容 只 显示 在 
其 容器 元 素 的 显示 区 域 里 ， 这 意味 着 只 有 一 

















部 分 内 容 可 见 。 

e scroll: 类 似 于 hidden ， 浏 览 器 将 对 溢出 
的 内 容 进行 隐藏 ， 但 显示 一 个 滚动 条 以 便 让 
用 户 能 够 滚动 看 到 内 容 的 其 他 部 分 。 

e auto: 类 似 于 scroll ， 但 浏览 器 只 在 确实 
RAT IN A eR UR AAA Tint 
出 ， 就 不 显示 滚动 条 。 


如 此 说 来 ， 在 overflow 属性 的 4 种 可 取 值 当中 ， 
最 能 满足 我 们 要 求 的 显然 是 hidden 。 我 们 有 一 
张 实 际 尺寸 是 400x100 像 素 的 图 片 ， 但 我 每 次 只 
0 de payer es 
和 部 分 。 


首先 ， 需 要 把 这 张 图 片 放 型 ANS a JU AR o 311] 
把 它 放 入 一 个 div 元 素 ， 并 把 这 个 div 元 素 的 id 
属性 值 设 置 为 slideshow : 











<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks 
</div> 





创建 一 个 样式 表 文 件 layout .css , JU EX 
Astyles 文件 夹 。 


在 layout.css 文件 里 ， 我 们 对 
id="slideshow" 的 div 元 素 的 尺寸 做 了 如 下 设 
A: 


#slideshow { 
width: 100px; 
height: 100px; 
position: relative; 


} 





把 position 设置 为 relative 很 重要 ， 因 为 我 
们 想 让 子 图 片 使 用 绝对 位 置 。 通 过 使 用 

值 relative ， 子 元 素 的 (0, 0) 坐 标 将 固定 
slideshow div 的 左上 角 。 


把 CSS overflow 属性 设置 为 hidden ， 就 能 确 
保 其 中 的 内 容 会 被 裁剪 : 


#slideshow { 
width: 10@px; 
height: 100px; 
position: relative; 


overflow: hidden; 





接 下 来 ， 我 们 添加 一 个 <link> 标签 ， 把 
layout.css 样式 表 引 入 1ist.html 文档 : 





<!DOCTYPE html» 
<html lang="en"> 
<head> 


<meta charset="utf-8" /> 
<title>Web Design</title> 
<link rel="stylesheet" href="styles/layout.css" 
</head> 
<body> 
«hi»Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
«li» 
«a href="structure.html">Structure</a> 
</li> 
«li» 
«a hrefz"presentation.html"»Presentation«/a» 
</li> 
<li> 
«a hrefz"behavior.html"»Behavior«/a» 
</li> 
</ol> 
<div id="slideshow"> 
<img src="images/topics.gif" alt="building blo 


</div> 
</body> 
</html> 





现在 ， 把 1ist.html 文档 加 载 到 浏览 器 ， 束 可 以 
看 到 变化 《图片 已 经 被 裁剪 ) 。 我 们 只 能 


到 topics.gif 图 片 的 一 部 分 一 一 它 的 第 一 个 


100 像 素 宽 的 部 分 ， 如 图 10-9 所 示 。 
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图 10-9 


接 下 来 要 解决 的 问题 是 ， 让 这 个 网 页 对 用 户 的 操 
作 行 为 做 出 正确 的 响应 。 我 们 想 在 用 户 把 鼠标 指 
针 悬 停 在 某 个 链接 上 时 ， 把 topics.gif 图片 中 
与 之 对 应 的 那个 部 分 显示 出 来 。 这 是 一 种 行为 上 
的 变化 : 用 JavaScript 和 和 DOM 来 实现 再 合适 不 过 
Ls 


10.2.4 JavaScript 
我 们 计划 用 moveElement 函数 来 移动 


topics.gif 图 片 。 根 据 用 户 正 把 鼠标 指针 悬 售 
在 哪个 链接 上 ， 我 们 将 这 个 图 片 向 左 或 向 右 移 


Bl]. 


我 们 需要 把 调用 moveElement 函数 的 行为 ， 与 
链接 清单 里 每 个 链接 的 onmouseover 事件 关联 
起 来 。 


编写 一 个 prepareSlideshow 函数 来 完成 这 项 工 
作 ， 下 面 是 它 的 代码 清单 : 


function prepareSlideshow() { 

// 确保 浏览 器 支持 DOM 方法 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 

// 确保 元 素 存在 
if (!document.getElementById("linklist")) return 
if (!document.getElementById("preview")) return 1 

// 为 图 片 应 用 样式 
var preview = document.getElementById("preview"); 
preview.style.position = "absolute"; 
preview.style.left = "@px"; 
preview.style.top = "@px"; 

// 取得 列表 中 的 所 有 链接 
var list = document.getElementById("linklist"); 
var links = list.getElementsByTagName("a") ; 

// 为 mouseover 事件 添加 动画 效果 
links[@].onmouseover = function() ( 

moveElement("preview",-100,0,10); 
j 
links[1].onmouseover = function() { 
moveElement( "preview", -200,0,10); 
j 
links[2].onmouseover = function() { 
moveElement( "preview", -300,0,10); 
} 
} 


























HÆ, prepareSlideshow 函数 检查 浏览 器 是 否 
支持 它 用 到 的 DOM 方 法 : 


if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 


接着 ， 检 查 1inklist 和 preview 元 素 是 否 存 
Æo aiJ, preview 是 topics .gif 图 片 的 id 
属性 值 : 


if (!document.getElementById("linklist")) return fd 
if (!document.getElementById("preview")) return fa 





此 后 ， 为 preview 图 片 设 定 一 个 默认 位 置 。 我 将 
把 它 的 style.1left 属性 设置 为 9px ， 把 它 的 
style.top 属性 也 设置 为 6px : 


var preview = document.getElementById("preview"); 
preview.style.position = "absolute"; 
preview.style.left = "@px"; 


preview.style.top = "@px"; 





请 注意 ， 这 并 不 意味 着 topics.gif 图 片 将 出 现 
在 浏览 器 窗口 的 左上 角 。 它 将 出 现在 它 的 容器 元 
素 ， 也 就 是 那个 id 属性 值 是 slideshow 的 div 
元 素 的 左上 角 。 因 为 那个 div 元 素 的 CSS 
position 属性 值 是 relative : 如 果 把 
position 属性 值 是 absolute 的 元 素 A 放 入 一 
个 position 属性 值 是 relative 的 元 素 B，B 就 
成 为 A 的 容器 元 素 ， 而 A 将 在 B 的 显示 区 域 里 
按 absolute 方式 进行 摆 放 。 因 此 ，preview 图 
片 将 出 现在 slideshow 元 素 的 左上 角 与 这 
个 div 元 素 的 左边 界 和 上 边界 之 间 的 距离 都 是 
Opx。 


最 后 ， 把 onmouseover 行为 与 链接 清单 里 的 各 





个 链接 关联 起 来 。 首 先 ， 把 一 个 由 包容 
frlinklist 元 素 里 的 所 有 a 元 素 构 成 的 节点 集 
合 赋值 给 变量 links 。 第 一 个 链接 对 应 

着 links[6] ， 第 二 个 链接 对 应 着 Links[1] ， 
第 三 个 链接 对 应 着 links[2] : 





var list = document.getElementById("linklist"); 
var links = list.getElementsByTagName("a"); 





A FA PB BRE Sa EDI EB Pe E. 

I, moveElement 函数 将 被 调用 执行 。 此 时 ， 
它 的 elementID 参数 的 值 是 preview final x 
参数 的 值 是 -100，final_y 参数 的 值 是 

0, interval 参数 的 值 是 10 坚 秒 ; 


links[@].onmouseover = function() ( 
moveElement( "preview", -100,0,10); 


} 








第 二 个 链接 应 该 有 同样 的 行为 
参数 的 值 变 成 了 -200: 


除了 final_x 


links[1].onmouseover = function() { 
moveElement("preview",-200,0,10); 


} 





第 三 个 链接 将 把 preview 图 片 向 左 移动 300 像 


e 
ZAIN? 





links[2].onmouseover = function() ( 
moveElement( "preview", -300,0,10); 


} 


接 下 来 ， 用 addLoadEvent 函数 调 

用 prepareSlideshow 函数 ， 这 将 使 得 后 者 在 页 
面 加 载 时 得 到 执行 并 把 onmouseover 行为 绑 定 
到 那 三 个 链接 上 : 


addLoadEvent (prepareSlideshow); 





把 prepareSlideshow 函数 保存 

为 prepareSlideshow.js 文件 并 将 其 放 

到 scripts 文件 夹 里 。 把 moveElement .js 和 
addLoadEvent. js 文件 也 放 到 同一 个 文件 夹 
中 。 


为 了 从 1ist.html 文档 里 调用 这 三 个 脚本 ， 还 需 
要 在 这 个 文档 的 </body> 标签 之 前 添加 一 些 
<script> 标签 : 





<!DOCTYPE html» 
<html lang="en"> 
<head> 


<meta charset="utf-8" /> 
<title>Web Design</title> 
<link rel="stylesheet" href="styles/layout.css" 
</head> 
<body> 
«hi»Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
«li» 
«a href="structure.html">Structure</a> 
</li> 
«li» 
«a hrefz"presentation.html"»Presentation«/a» 
</li> 
«li» 


«a href-z"behavior.html"»Behavior«/a» 
</li> 
</ol> 
<div id="slideshow"> 
<img src="images/topics.gif" alt="building blo 
</div> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/moveElement.js"></script> 
<script src="scripts/prepareSlideshow.js"></scri 
</body> 
</html> 





fElist. html CMRE —AWebi] aro TE B 
Pant Et EEA E SE EB: E o AA SU 
男 效 果 ， 如 图 10-10 所 示 。 
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图 10-10 


根据 鼠标 指针 正 悬 停 在 哪个 链接 

E, topics.gif 图 片 的 不 同 部 分 将 进入 我 们 的 
视线 。 

不 过 ， 事 情 好 像 有 点 不 太 对 头 : 如 果 把 鼠标 指针 
在 链接 之 间 快 速 地 来 回 移动 ， 动 画 效 果 将 变 得 泥 
乱 起 来 。moveElement 函数 可 能 什么 地 方 有 问 








题 。 





10.2.5 ”变量 作用 域 问 题 


动画 效果 不 正确 的 问题 是 由 一 个 全 局 变量 引起 
的 。 在 把 moveMessage 函数 抽象 化 
ZjmoveElement 函数 的 过 程 中 ， 我 们 未 对 变量 
movement 做 任何 修改 : 


function moveElement(elementID,final x,final y,int& 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return f 
var elem - document.getElementById(elementID); 
var xpos - parseInt(elem.style.left); 
var ypos - parseInt(elem.style.top); 
if (xpos == final x && ypos == final y) ( 
return true; 
} 
if (xpos < final_x) { 
Xpos++; 


if (xpos > final_x) { 
xpos--; 

} 

if (ypos < final_y) { 
ypos++; 

} 

if (ypos > final_y) { 


ypos--; 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = "moveElement('"+elementID+"' ,"+fina 
movement = setTimeout (repeat, interval) ; 





这 留 下 了 一 个 隐患 ， SA Pg i ss et EE 
某 个 链接 上 上， 不管 上 一 次 调用 是 否 已 经 把 图 片 移 
动 到 位 ，moveElement 函数 都 会 被 再 次 调用 并 
试图 把 这 个 图 片 移动 到 另 一 个 地 方 去 。 于 是 ， 当 








用 户 在 链接 之 则 快速 移动 鼠标 时 ，movement 4E 
量 就 会 像 一 条 拔河 绳 那样 来 回 变化 ， 

而 moveElement 函数 就 会 试图 把 图 片 同 时 移动 
到 两 个 不 同 的 地 方 去 。 


如 果 用 户 移动 鼠标 的 速度 够 快 ， 积 累 

在 setTimeout 队列 里 的 事件 就 会 导致 动画 效果 
产生 滞后 。 为 了 消除 动画 滞后 的 现象 ， 可 以 

用 clearTimeout 函数 清除 积累 在 setTimeout 
队列 里 的 事件 : 


clearTimeout (movement); 


可 是 ， 如 果 在 还 没有 设置 movement 变量 之 前 就 
执行 这 条 语句 ， 我 们 会 收获 一 个 错误 。 


我 不 能 使 用 局 部 变量 : 


var movement = setTimeout (repeat, interval) ; 


如 果 这 样 做 ，clearTimeout 函数 调用 语句 将 无 
法 工作 ， 因 为 局 部 变量 movement 
在 clearTimeout 函数 的 上 下 文 里 不 存在 。 


也 就 是 说 ， 既 不 能 使 用 全 局 变量 ， 也 不 能 使 用 局 
部 变量 。 我 们 需要 一 种 介 乎 它们 二 者 之 间 的 东 
西 ， 需 要 一 个 只 与 正在 被 移动 的 那个 元 系 有 关 的 











只 与 茶 个 特定 元 素 有 天 的 变量 是 存在 的 。 事 实 
上 ， 我 们 一 直 在 使 用 它们 。 那 就 是 “属性 ”。 


到 目前 为 止 ， 我 们 一 直 在 使 用 由 DOM 提 供 的 属 


性 ， 如 element .firstChild 
、element . style ， 等 等 。JavaScript 人 允许 我 们 
为 元 素 创 建 属性 : 


element.property = value 





只 要 愿意 ， 完 全 可 以 创建 一 个 名 为 foo 的 属性 并 
把 它 设置 为 "bar": 


element.foo = "bar"; 








这 很 像 是 在 创建 一 个 变量 ， 但 区 别 是 这 个 变量 专 


属于 菏 个 特定 的 元 素 。 


我 们 把 变量 movement 从 一 个 全 局 变量 改变 为 正 
在 被 移动 的 那个 元 素 Celem WR) 的 属性 。 这 
样 一 来 ， 就 可 以 测试 它 是 否 已 经 存在 ， 并 在 它 已 
经 存在 的 情况 下 使 用 clearTimeout 函数 了 : 











function moveElement(elementID,final x,final y,int 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return 
var elem - document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout(elem.movement); 


} 
var xpos = parseInt(elem.style.left); 
var ypos = parseInt(elem.style.top); 


if (xpos == final_x && ypos == final_y) { 
return true; 


if (xpos « final x) ( 
XpOS++3 

} 

if (xpos > final x) ( 


Xpos--; 

I 

if (ypos « final y) ( 
ypos++; 


} 
if (ypos > final_y) { 
ypos--; 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = "moveElement('"+elementID+"' ,"+fina 
elem.movement = setTimeout (repeat, interval) ; 





于 是 ， 不 管 moveElement 函数 正在 移动 的 是 哪 





个 元 素 ， 该 元 素 都 将 获得 一 个 名 为 movement 的 
属性 。 如 果 该 元 素 在 moveElement 函数 开始 执 
行 时 已 经 有 了 一 个 movement 属性 ， 就 应 该 

用 clearTimeout 函数 对 它 进行 复位 。 这 样 一 
来 ， 即 使 因为 用 户 快 速 移动 鼠标 指针 而 使 得 某 个 
元 素 需 要 问 不 同 的 方 同 移动 ， 实 际 执行 的 也 只 有 
一 条 setTimeout 函数 调用 语句 。 


请 重新 加 载 1ist.html 文件 。 现 在 ， 在 链接 之 间 
快速 移动 鼠标 指针 不 再 有 任何 问 

题 。setTimeout 队列 里 不 再 有 积累 的 事件 ， 动 
画 将 随 着 鼠标 指针 在 链接 之 间 的 移动 而 立刻 改变 
方向 。 接 下 来 ， 再 来 看 看 我 们 还 可 以 对 动画 效果 
做 哪些 改进 。 


10.2.6 ”改进 动画 效果 


在 元 素 到 达 由 final_x 和 final_y 参数 给 出 的 目 
的 地 之 前 ，moveElement 函数 每 次 只 把 它 移动 

一 个 像素 px) 的 距离 。 移 动 效 果 很 平滑 ， 但 

oe 些 慢 。 我 们 把 动画 的 移动 速度 加 
快 一 点 儿 。 





























仔细 看 看 下 面 这 上 坚 简 单 的 代码 ， 它 们 来 自 


moveElement.js 文件 


if (xpos < final_x) { 


Xpos++; 


} 





变量 xpos 是 被 移动 元 素 的 当前 左 位 置 ， 变 量 
final x 是 这 个 元 素 的 目的 地 的 左 位 置 。 上 面 这 
段 代 码 的 含义 是 : “如 果 变 量 xpos 小 于 变量 
final_x ， 就 给 xpos 的 值 加 1。 ee 不 
管 那个 元 素 与 它 的 目的 地 距离 多 远 ， 它 每 次 只 前 
(1px) 。 为 了 增加 趣味 性 ， 我 们 来 
改变 它 。 


如 果 那 个 元 素 与 它 的 目的 地 距离 较 远 ， 就 让 它 每 
次 前 进 一 大 步 ， 如 果 那 个 元 素 与 它 的 目的 地 距离 
较 近 ， 束 让 它 每 次 前 进 一 小 步 








2 我 们 需要 算出 元 素 与 它 的 目的 地 之 间 的 中 
。 如 果 xpos 小 于 final x ， 我 们 要 知道 它们 

xd. 只 要 用 final_x (目的 地 的 左 位 置 ) 减 

Expos (SEMA) 就 可 以 知道 答案 : 





dist = final x - xpos; 


这 个 结果 就 是 元 素 还 需 F 要 行 入 的 距离 。 我 们 决定 
让 元 素 每 次 前 进 这 个 距离 的 十 分 之 一 。 








dist = (final x - xpos)/10; 
xpos = xpos + dist; 





这 将 把 元 素 朝 它 的 目的 地 移动 十 分 之 一 的 距离 。 
选用 十 分 之 一 的 理由 是 为 了 计算 方便 ; 如 果 你 愿 
意 ， 选 用 其 他 的 值 也 没 问 题 。 


如 果 xpos 与 final_x 相差 500 像 素 ， 变 量 dist 
将 等 于 50。xpos 的 值 将 增加 50。 如 果 xpos 
与 final_x 相差 100 像 素 ，xpos 的 值 将 增加 10。 


不 过 ， 当 xpos 5final x 之 间 的 差距 小 于 10 的 
时 候 ， 问 题 来 了 : 用 这 个 差距 除 以 10 的 结果 将 小 
于 1， 而 我 们 不 可 能 把 一 个 元 素 移动 不 到 一 个 像 
素 的 距离 。 


这 个 问题 可 以 用 Math 对 象 的 ceil 方法 来 解决 ， 
它 可 以 返回 不 小 于 dist 的 值 的 一 个 整数 。 下 面 
是 ceil 方法 的 语法 : 


Math.ceil(number) 


这 将 把 浮 点 数 number 同 “ 大 于 ” 方 回 舍 入 为 与 之 
最 接近 的 整数 。 还 有 一 个 与 此 相对 的 floor 7; 
法 ， 它 可 以 把 任意 浮 点 数 同 “小 于 ” 方 同 舍 入 为 与 
之 最 接近 的 整数 。round 属性 将 把 任意 浮 点 数 合 
入 为 与 之 最 接近 的 整数 ; 


Math.floor(number) 
Math.round(number) 





具体 到 moveElement 函数 ， 我 需要 问 “ 大 于 ” 方 回 
进行 舍 入 。 如 果 错 误 地 选用 了 floor 或 round 7; 
法 ， 这 个 元 素 将 永远 也 不 会 到 达 目 的 地 : 


dist = Math.ceil((final x - xpos)/10); 


xpos = xpos + dist; 





这 就 解决 了 xpos Jv T final x 时 的 问题 : 


< final x) ( 
Math.ceil((final x - xpos)/10); 
xpos + dist; 








如 果 xpos 大 于 final x ， 在 计算 距离 时 就 应 该 
用 xpos 减 去 final_x 。 把 这 个 减法 结果 除 以 
10， 辣 “大 于 ” 舍 入 为 与 之 最 接近 的 整数 ， 然 后 赋 
值 给 变量 dist 。 此 时 ， 我 们 必须 用 xpos 减 去 
dist 才能 让 元 系 更 接近 它 的 目的 地 : 





if (xpos > final x) { 
dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


} 





同样 的 逻辑 也 适用 于 变量 ypos 和 final_y : 


if (ypos < final y) { 
dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 

j 

if (ypos » final y) ( 


dist - Math.ceil((ypos - final y)/10); 
ypos - ypos - dist; 
} 





不 要 忘 了 在 xpos 和 ypos 之 后 声明 dist : 


var xpos = parseInt(elem.style.left); 
var ypos = parseInt(elem.style.top); 
var dist 0; 





下 面 是 moveElement 函数 在 经 过 上 述 改 进 后 的 
代码 清单 : 





function moveElement(elementID,final x,final y,int 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return 
var elem - document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout(elem.movement); 
} 
var xpos = parseInt(elem.style.left); 
var ypos = parseInt(elem.style.top); 
var dist = 0; 
if (xpos == final_x && ypos == final_y) { 
return true; 
} 
if (xpos < final_x) { 
dist = Math.ceil((final x - xpos)/10); 
xpos = xpos + dist; 
} 
if (xpos > final_x) { 
dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 
} 
if (ypos < final_y) { 
dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 
} 
if (ypos > final_y) { 
dist = Math.ceil((ypos - final y)/10); 
ypos = ypos - dist; 
} 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
var repeat = "moveElement('"+elementID+"' ,"+fina 
elem.movement = setTimeout (repeat, interval) ; 


BENE 
把 这 些 修改 保存 到 moveElement .js 文件 。 重 新 


加 载 1ist .html 就 可 以 看 到 新 的 动画 效果 ， 如 图 
10-11 所 示 。 
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图 10-11 


现在 ， 动 国 效果 给 人 的 感觉 是 更 加 平滑 和 迅速 
当 你 第 一 次 把 鼠标 指针 巧 售 在 茶 个 链接 上 时 ， 图 
片 将 跳跃 一 大 段 距 离 。 随 独 图 瞩 越 来 越 接 近 最 终 
目的 地 ， 它 会 “ 放 慢 ”自己 的 脚步 。 


在 (X)HTML、CSS 和 JavaScript 的 共同 努力 下 ， 预 
期 的 动画 效果 终于 实现 了 。 一 切 都 显得 那么 完 
美 ， 但 凡事 都 有 改进 的 余地 ， 这 一 次 也 不 例外 。 


10.2.7 ”添加 安全 检查 
moveElement 函数 现在 的 表现 确实 非常 好 ， 但 
还 有 一 件 事 让 我 不 放心 : 这 个 函数 的 开头 部 分 需 








var Xpos 
var ypos 


parseInt(elem.style.left) ; 
parseInt(elem.style.top); 








看 出 来 了 吗 ? 这 里 需要 假设 elem 元 素 肯 定 有 一 
个 left 样式 属性 和 一 个 top 样式 属性 。 我 其 实 
应 该 先 检 查 一 下 这 是 不 是 事实 。 


如 果 elem 元 素 的 left 和 /或 top 属性 未 被 设置 ， 
我 有 以 下 几 种 选择 。 首 先 ， 可 以 简单 地 就 此 退出 
这 个 函数 : 











if (lelem.style.left || !elem.style.top) { 
return false; 


} 





如 果 JavaScript 没 有 读 到 这 些 属性 ， 整 个 函数 将 静 
悄悄 地 结束 运行 而 不 是 报告 出 错 。 

男 一 种 选择 是 在 moveElement MAE 7jleft 和 

top 属性 分 别 设置 一 个 默认 值 : 如 果 这 两 个 属性 
没有 被 设置 ， 我 将 把 它们 的 默认 值 设 置 为 0px: 








if (lelem.style.left) ( 
elem.style.left = "@px"; 


if (lelem.style.top) { 


elem.style.top = "0px"; 
} 





下 面 是 moveElement 函数 现在 的 代码 清单 : 


function novetlenent(elenentID, Final. x, final_y, int 


if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return 
var elem = document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout (elem.movement) ; 
} 
if (!elem.style.left) { 
elem.style.left = "@px"; 
} 
if (!elem.style.top) { 
elem.style.top = "@px"; 
} 
var xpos = 
var ypos = 
var dist = 
if (xpos 
return 
} 
if (xpos 
dist = 
xpos = 
} 
if (xpos 
dist = 
xpos = 
} 
if (ypos 
dist = 


parseInt(elem.style.left); 
parseInt(elem.style.top); 
ð; 
== final_x && ypos == 
true; 


final_y) { 


< final_x) { 
Math.ceil((final x - xpos)/10); 
xpos + dist; 


> final x) ( 
Math.ceil((xpos - final x)/10); 
xpos - dist; 


« final y) ( 
Math.ceil((final y - ypos)/10); 


ypos - 

j 

if (ypos 
dist - 
ypos - 


ypos + dist; 


> final y) { 
Math.ceil((ypos - final y)/10); 
ypos - dist; 


} 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = "moveElement('"+elementID+"' ,"+fina 
elem.movement = setTimeout (repeat, interval) ; 





有 了 刚才 所 说 的 安全 措施 之 后 ， 就 用 不 着 再 明确 
地 设置 preview 元 素 的 出 发 点 位 置 了 。 这 意味 着 
可 以 把 prepareSlideshow 函数 里 的 这 两 条 语句 


Wiss : 


preview.style.left = "@px"; 
preview.style.top = "@px"; 





既然 提 到 了 prepareSlideshow PAZ, Witt Aha 
看 它 是 不 是 还 有 地 方 需要 改进 。 











10.2.8 生成 HITML 标记 


list.html 文档 里 包含 一 些 只 是 为 了 能 够 用 
JavaScript 代 码 实 现 动画 效果 而 存在 的 标记 : 








<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks 
</div> 





如 果 用 户 没有 局 用 JavaScript 文 持 ， 以 上 内 容 就 未 
免 太 多 余 了 。 这 里 的 div 和 img 元 素 纯粹 是 为 了 
动画 效果 才 “ 塞 ”进来 的 。 既 然 如 此 ， 与 其 把 这 些 





元 素 便 编码 在 文档 里 ， 不 如 用 JavaScript 代 码 来 生 
成 它们 。 我 们 决定 在 prepareSlideshow.js X 
件 里 做 这 些 事情 。 


var slideshow = document.createElement("div"); 
slideshow.setAttribute("id","slideshow"); 





var preview = document.createElement("img"); 
preview.setAttribute("src","images/topics.gif"); 


preview.setAttribute("alt","building blocks of web 


preview.setAttribute("id"," preview"); 





把 新 创建 的 img 元 素 放 入 新 创建 的 div TA: 


slideshow. appendChild(preview) ; 





最 后 ， 我 们 想 让 这 些 新 创建 的 元 素 紧 跟着 出 现在 
链接 清单 的 后 面 。 我 们 将 使 用 来 自 本 书 第 7 章 的 
insertAfter 函数 来 完成 这 一 步骤 : 


var list = document.getElementById("linklist"); 
insertAfter(slideshow, list) ; 





下 面 是 最 终 完成 的 prepareSlideshow 函数 的 代 
码 清单 : 





function prepareSlideshow() 1 

















// 确保 浏览 器 理解 DOM 方法 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 

// 确保 元 素 存在 
if (!document.getElementById("linklist")) return 
var slideshow = document.createElement ("div"); 
slideshow.setAttribute("id"," slideshow"); 
var preview - document.createElement("img"); 
preview.setAttribute("src","images/topics.gif"); 
preview.setAttribute("alt","building blocks of w 
preview.setAttribute("id","preview"); 
slideshow.appendChild(preview); 
var list - document.getElementById("linklist"); 
insertAfter(slideshow,list); 








// 取得 列表 中 的 所 有 链接 
var links = list.getElementsByTagName("a"); 
// 为 mouseover 事件 添加 动画 效果 
links[@].onmouseover = function() ( 
moveElement("preview",-100,0,10); 
} 
links[1].onmouseover = function() ( 
moveElement( "preview", -200,0,10); 
} 
links[2].onmouseover = function() ( 
moveElement( "preview", -300,0,10); 


} 








} 
addLoadEvent (prepareSlideshow) ; 





接 下 来 ， 还 需要 对 1ist.html 文件 做 一 些 修改 : 
删除 1d="slideshow" 的 div 元 素 和 
id="preview" 的 图 片 ; 添加 一 组 <script> br 
签 来 调用 insertAfter.js 文件 。 下 面 是 最 终 完 
成 的 list.html 文件 的 代码 清单 : 





<!DOCTYPE html» 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 
<link rel="stylesheet" href="styles/layout.css" 
</head> 
<body> 
«hi»Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
«li» 
«a hrefz"structure.html"»Structure«/a» 
</li> 
«li» 
«a hrefz"presentation.html"»Presentation«/a» 
</li> 
<li> 
«a hrefz"behavior.html"»Behavior«/a» 
</li> 
</ol> 


«script src="scripts/addLoadEvent.js"></script> 
«script src-"scripts/insertAfter.js"»«/script» 
«script src="scripts/moveElement.js"></script> 
«script src-"scripts/prepareSlideshow.js"»«/scri 
«/body» 
«/html» 





把 insertAfter KAS NinsertAfter.js X 
件 ， 并 把 它 放 入 scripts 文件 夹 : 


function insertAfter(newElement,targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastChild == targetElement) { 
parent.appendChild(newElement) ; 
} else { 
parent.insertBefore(newElement,targetElement.nd 
} 
} 





还 需要 对 样式 表 文 件 1ayout .css 做 一 些 修改 。 
因为 我 们 刚才 从 prepareSlideshow.js 文件 里 
删除 了 如 下 所 示 的 一 行 代码 : 


preview.style.position = "absolute"; 





所 以 现在 需要 把 以 下 样式 声明 添加 
到 layout.css 样式 表 里 ， 这 才 是 样式 信息 应 该 
属于 的 地 方 : 








#slideshow { 
width: 100px; 
height: 100px; 
position: relative; 
overflow: hidden; 


} 
#preview { 
position: absolute; 


} 





现在 ， 在 Web 浏览 器 里 刷新 1ist.html 文档 。 从 
表面 上 看 ， 功 能 还 是 那些 功能 ， 行 为 还 是 那些 行 
为 。 但 经 过 上 述 改进 之 后 ， 这 份 文档 的 结构 层 、 





表示 层 和 行为 层 已 经 分 离 得 更 加 彻 克 了。 如果 在 
共用 了 JavaScript 文 持 功 能 的 情况 下 浏览 这 份 文 
档 ， 动 画图 片 将 根本 不 会 出 现 。 


我 们 用 JavaScript 实 现 的 动画 功能 非常 完善 。 如 果 
启用 了 JavaScript， 这 个 页 面 就 能 根据 用 户 的 操作 
动作 通过 动画 效果 问 用 户 提 供 一 些 赏心悦目 的 视 
觉 反 馈 ， 如 果 没 有 启用 JavaScript， 动 画 功 能 将 按 
照 我 们 安排 的 平稳 退化 保持 静默 ， 不 影响 用 户 的 
浏览 体验 。 


如 果 想 进一步 加 强 链接 清单 和 动画 图 片 的 视觉 联 
系 ， 可 以 通过 修改 1ayout.css 文件 去 实现 一 些 
更 精彩 的 效果 。 比 如 说 ， 可 以 把 动画 图 片 的 显示 
位 置 从 链接 清单 的 下 方 挪 到 它 的 旁边 。 如 果 想 让 
ae 出 的 话 ， 还 可 以 给 它 加 上 一 个 边 
Es 


a. 10.3 小结 


在 本 章 里 ， 我 们 首先 对 “动画 ”进行 了 定义 : 随时 
间 变 化 而 改变 某 个 元 素 在 浏览 器 窗口 里 的 显示 位 
置 。 通 过 结合 使 用 CSS-DOM 和 JavaScript 的 
setTimeout 函数 ， 很 容易 实现 一 个 简单 的 动 
Hj, 


从 技术 上 讲 ， 实 现 动画 效果 并 不 困难 ， 问 题 是 在 
实践 中 应 不 应 该 使 用 动画 。 动 画 技术 可 以 让 我 们 
创建 出 很 多 种 非常 酷 的 效果 ， 但 那些 四 处 移动 的 
元 素 对 用 户 有 用 或 有 帮助 的 场合 却 并 不 多 。 不 

过 ， 我 们 刚才 创建 的 JavaScript 动 男 却 是 一 个 例 

外 。 我 们 花 了 不 少 功 夫 才 让 它 有 了 平滑 的 动画 效 
果 和 平稳 退化 ， 最 终 的 结果 证 明 我 们 付出 的 努力 
是 非 稼 值得 的 。 我 们 现在 有 了 一 个 通用 性 的 函 

人 

m. 


下 一 章 将 介绍 最 新 的 HTML5， 你 将 学 会 如 何 利 
用 它 的 新 属性 。 














11% HTMLS5 
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e 什么 是 HTML5 

e 今天 怎么 使 用 HTML5 

。 对 HTML5 中 一 些 特性 的 简单 介绍 ， 包 
括 Canvas、 视 频 、 音 频 和 表单 


本 书 开 始 时 介绍 了 JavaScript 的 历史 以 及 DOM 的 
起 源 。 今 天 ，HTML5 的 出 现 使 得 DOM、 样 式 和 
行为 之 间 的 界限 变 得 模糊 了 。 因 此 ， 现 在 让 我 们 
来 看 看 HTML5 到 底 有 哪些 新 特性 ， 看 看 未 来 的 
发 展 方向 在 哪里 。 


o 11.1 HIML5 人 简介 


HTML5 是 HTML 语言 当前 及 未 来 的 新 标准 。 
HTML 规 范 从 HTML 4 到 XHTML， 再 到 Web 
Apps 1.0， 最 后 又 回 到 HITML5， 整 个 成 长 历程 充 
满 了 艰辛 和 争议 。HTML5 问 世 背 后 的 明争暗斗 
活 像 一 部 肥皂 剧 〈( 这 部 戏 中 的 一 些 情节 至 今 还 在 
延续 ) ， 不 管 怎样 ， 结 局 还 是 圆满 的 。 我 们 有 理 
由 为 HIML5 欢 呼 ， 因 为 多 种 技术 统一 的 趋势 日 

， 它 标志 着 下 一 代 Web 的 惧 幕 正在 组 组 拉 


谈 到 Web 设 计 ， 最 准确 的 理解 是 把 网 页 看 成 三 个 
层 : 


(1) 结构 层 

(2) 样式 层 

(3) 行为 层 

这 三 个 层 分 别 对 应 不 同 的 技术 ， 分 别 是 : 
(D) 超 文本 标记 语言 (HTML) 

(2) RAIEK (CSS) 

(3) JavaScript 和 文档 对 象 模 型 (DOM) 


没 错 ， 你 可 以 说 还 能 再 加 一 层 ， 也 就 是 浏览 右 的 
JavaScript API， 包 括 cookie 和 window 等 1 。 











1 这 里 指 的 是 “浏览 器 对 象 模 型 ”(BOM，Broswer Object 
Model) 。 译 者 注 











但 随 着 HIML5 的 到 来 ， 上 面 所 说 的 结构 层 、 样 
式 层 和 行为 屋 〈 以 及 浏览 器 中 的 JavaScript API) 


已 经 被 整 装 到 一 个 小 集合 中 ， 不 过 也 仅仅 就 是 一 
个 集合 。HTML5 在 这 个 集合 中 提供 了 几 种 旗 训 
相当 的 技术 ， 让 我 们 可 以 按 需 取 用 或 者 调用 。 


例如 ， 在 结构 层 中 ，HTML5 添 加 了 新 的 标记 元 
素 ， 如 <section> 、<article> . «header» 和 
«footer» 。 本 书 并 不 想 在 这 里 讨论 这 些 新 的 标 
签 ， 想 知道 所 有 新 标记 的 读者 请 查看 规范 
Chttp://www.w3.org/TR/html5/ ) 。HTML5 还 提 
供 了 更 多 交互 及 媒体 元 素 ， 例 如 <canvas> 

. «audio» 和 <video> 。 表 单 得 到 了 加 强 ， 新 增 
SBE TAHA. BAS. TE BRAUER 
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己 的 JavaScript 和 DOM API. 


在 行为 屋 ，HTML5 规 定 了 DOM 中 每 个 新 元 素 的 
交互 方式 ， 以 及 新 的 API。 例 如 ， 我 们 可 以 自 定 
义 <video> 元 素 的 控件 ， 改 变 其 播放 方 

xk, «form» 元 素 则 支持 进度 控制 ， 而 

在 <canvas> 元 素 中 ， 可 以 绘制 各 种 图 形 和 添加 
图 片 及 其 他 对 象 。 


不 仅 是 标记 和 行为 ， 表 现 层 同样 也 得 到 了 改进 。 
CSS 3 的 多 个 模块 宫 括 了 高 级 选择 器 、 渐 变 、 变 
换 ， 还 有 动画 。 这 些 模块 完全 可 以 蔡 代 很 多 过 去 
需要 编写 脚本 才能 实现 的 效果 ， 比 如 动画 和 和 定位 
元 素 ， 这 些 效果 在 表现 层 中 的 位 置 举足轻重 。 虽 
然 要 实现 高 级 动画 效果 仍然 免不了 要 编写 很 多 脚 
本 ， 但 很 多 简单 的 交互 应 该 可 以 跟 计 时 右 或 
JavaScript 说 拜拜 了 。 


最 后 ， 新 JavaScript API 还 包括 其 他 很 多 模块 ， 比 
"liGeolocation, Storage. Drag-and-Drop. Socket 


不 管 打 算 使 用 HTML5 的 什么 新 特性 ， 请 记 住 : 
你 费 尽 心思 编写 的 (XIHIML 代 码 仍 然 有 效 。 为 
了 与 HIML5 兼 容 ， 你 要 做 的 只 有 一 小 点 改变 。 




















想 不 想 把 绝 大 多 数 文 档 都 “升级 ”到 HTML5? 
好 ， 就 把 文档 类 型 声明 改 成 <!DOCTYPE html» 
即 可 。 


假如 你 想 让 自己 的 页 面 验证 无 误 ， 当 然 还 要 把 一 
些 瞩 弃 的 元 素 蔡 换 掉 ， 如 把 cacronym> # 
成 <abbr> 。 不 过 要 知道 ， 验 证 只 是 一 个 工具 ， 
它 有 助 于 你 成 为 一 个 好 程序 员 ， 但 它 却 不 是 我 们 
追求 的 理想 。 此 外 ，<sectiony> 或 <articley> 
等 新 元 素 在 一 些 老 浏览 器 中 也 许 不 会 表现 得 很 
但 浏览 器 的 版 本 越 新 ， 它 们 的 表现 就 会 越 
Ts 


第 8 章 我 们 已 经 说 过 了 ，HTML (包括 HTML5) 
与 XHTML 相 比 ， 对 语法 的 要 求 要 宽松 得 多 。 
HTML5 的 目标 是 和 已 有 的 HIML 及 XHTML 文档 
全 部 兼容 ， 无 论 怎么 标记 文档 ， 无 论 遵循 什么 编 
人 码 规则 ， 都 由 你 说 了 算 。 想 要 关闭 所 有 标签 并 且 
做 到 标记 格式 良好 吗 ? 请 便 。 你 懒得 关闭 所 有 标 
签 ， 嫌 那样 做 太 厂 烦 了 没 问 题 。 事 实 上 ， 就 
ERIKS “oR REP HT MLS Ce, te By VI 
完美 地 通过 验证 〈 但 愿 不 会 吓 着 你 ) : 








«IDOCTYPE html» 
«meta charset-utf-8 /» 
«title»This is a valid HTML5 document«/title» 


«p»Try me at http://validator.w3.org/check«/p» 





抛 开 验 证 成 功 与 否 不 谈 ， 如 果 你 想 让 自己 的 工作 
显得 更 专业 ， 我 猜 你 一 定 会 自己 加 上 <htm1> 

. <head> 和 <body> 一 一 无 论 浏 览 器 会 不 会 为 你 
添加 这 些 基本 的 结构 化 元 素 。 


那么 ，HTML5 离 我 们 还 有 多 远 ? 现在 我 们 就 可 
以 使 用 这 些 令 人 激动 的 新 特性 了 吗 ? 答案 是 : 可 
以 。 不 过 有 个 前 提 一 一 尽 可 能 提前 检查 浏览 絮 对 














HTML5 的 支持 情况 。 然 而 ， 检 查 浏 览 器 是 否 
持 全 部 HTML5 特 性 是 不 可 能 的 ， 我 们 说 过 ， 
HTML5 现 在 是 一 个 集合 ， 不 是 一 个 全 有 或 全 无 
的 概念 。 因 此 ， 可 以 利用 一 些 可 靠 的 特性 检测 ， 
或 者 使 用 本 书 通 篇 都 在 强调 的 渐进 增强 机 制 。 








a. 11.2 来 目 朋 友 的 忠告 


如 果 你 今天 就 想 用 HTML5， 那 太 好 了 ， 赶 紧 
吧 ! 在 作出 决定 之 后 ， 我 想 向 你 推荐 一 个 工具 : 


Modernizr2 。 





2 读者 也 可 以 从 GitHub Chttps://github.com/Modernizr/Modernizr 
) 下 载 Modernizr。 译 者 注 








Modernizr (http:/www.modernizr.com/ ) 是 一 个 
开源 的 JavaScript 库 ， 利 用 它 的 定 特 性 检测 功能 ， 
可 以 对 HTML5 文 档 进行 更 好 的 控制 。Modernizr 
不 会 给 你 添加 浏览 器 不 支持 的 特性 ， 比 如 ， 在 
IE6 中 束 没 有 办 法 使 用 本 地 存储 。Modernizr 能 做 
的 是 为 你 提供 一 些 不 同 的 CSS 类 名 以 及 特性 检测 
(feature-detection) 属性 。 要 想 现 在 使 用 
HTML5，Modernizr 是 必 不 可 少 的 ， 它 的 用 途 也 
AIETE. 


XE X Ern AModernizrz Ja, ESMA ULTRI 
载 变 一 些小 戏法 。 


首先 ， 它 会 修改 <html> 的 class 属性 ， 基 于 可 
用 的 HTML5 特 性 添加 额外 的 类 名 。 要 使 用 
Modernizr 编 写 文 档 ， 通 常 都 要 给 <html> 元 素 添 
加 一 个 no-js 类 : 


<html class="no-js"> 





利用 这 个 类 ， 可 以 在 浏览 器 不 支持 JavaScript 的 情 
况 下 应 用 CSS 样 式 。 


-no-js selector { 
style properties 


然后 ，Modernizr 会 检测 浏览 器 可 能 文 持 的 各 种 
特性 ， 并 相应 地 添加 类 名 。 
特性 ， 经 它 修改 后 的 类 名 大 致 如 下 所 示 : 


«html class-"js canvas canvastext geolocation cross 
hashchange historymanagement draganddrop websockets 
borderimage borderradius boxshadow opacity cssanima 
cssreflections csstransforms csstransforms3d csstrd 


sessionstorage webworkers applicationcache svg smi 





MRA s DS SCP REE, AEE BUR RA 
应 该 如 下 所 示 : 


«html class="js no-canvas no-canvastext no-geolocat 
no-indexeddb no-hashchange no-historymanagement no 
no-rgba no-hsla no-multiplebgs no-backgroundsize nq 
no-opacity no-cssanimations no-csscolumns no-cssgra 
no-csstransforms3d no-csstransitions no-video no-a 
no-applicationcache no-svg no-smil no-svgclippaths 








当然 ， 实 际 导 次 是 浏览 项 可 能 会 文 持 部 分 特性 ， 
而 不 支持 另 一 些 特 性 。 这 时 候 ， 类 名 中 就 会 间或 
出 现 feature 和 no-feature . 


根据 这 些 类 名 ， 可 以 在 CSS 中 定义 相应 的 增强 和 
退化 版 本 ， 改 善 用 户 体 验 : 








.multiplebgs article p { 

/* 为 支持 多 背景 浏览 器 编写 的 样式 */ 
} 
.no-multiplebgs article p { 





/* 为 不 文 持 多 背景 的 浏览 器 编写 的 后 备 样式 */ 
} 





类 似 地 ，Modernizr 库 也 提供 了 JavaScript 特 性 检 
测 对 象 ， 可 以 在 DOM 肢 本 中 直接 使 用 : 


if ( !Modernizr.inputtypes.date ) { 
/* 不 文 持 本 地 数据 ， 使 用 自 定义 的 数据 选择 脚本 */ 
createDatepicker (document .getElementById('birthdą 





} 





Modernizr 还 可 以 帮 一 些 老 旧 的 浏览 器 处 

理 <section> 和 <article> 这 样 的 新 元 素 。 有 
的 读者 可 能 还 不 知道 ， 其 实 你 可 以 在 大 多 数 浏览 
器 中 创建 类 似 <foo> 这 样 的 元 素 ， 然 后 再 为 该 元 
素 应 用 样式 只 要 你 不 在 乎 验证 结果 就 无 所 
谓 。 对 于 这 些 浏览 器 来 说 ， 新 的 HTML5 元 素 
(如 <section> ) 也 照样 可 以 拿 来 就 用 。 为 使 用 
这 些 新 元 素 ， 你 要 做 的 就 是 为 它们 指定 一 些 基 本 
HA 以 便 浏 览 器 可 以 把 它们 当做 块 元 素来 呈 
现 : 











article, aside, footer, header, hgroup, nav, sectid 
display: block; 
} 





唯一 的 特例 就 是 卫 。 要 在 正中 添加 未 知 元 素 ， 必 
ae 类 似 下 面 的 JavaScript 代 码 来 创建 该 元 


document.createElement('article'); 


pO 


Modernizr 可 以 帮 我 们 来 做 这 件 事 ;， 但是， 这 并 
不 意味 着 你 就 可 以 放心 地 使 用 <video> TRARA 
视频 了。Modernizr 不 会 为 我 们 添加 底层 的 
JavaScript 及 DOM API， 或 者 与 这 些 元 素 相 关 的 
其 他 特性 。 


使 用 Modernizr 非 党 简单 ， 从 
http://www.modernizr.com/ 下 载 它 ， 将 在 文档 的 
«head» 中 添加 该 脚本 : 





<script src="modernizr-1.5.min.js"></script> 





一 定 要 把 这 个 脚本 放 在 <head> 元 素 中 。 虽 然 这 
与 第 5 章 建议 的 不 一 致 ， 但 这 样 做 有 特殊 的 原 
因 。 把 Modernizr 放 在 文档 开头 ， 可 以 在 加 载 其 
他 标记 之 前 先 加 载 它 ， 以 便 它 在 文档 呈现 之 前 能 
够 创建 好 新 的 HTML5 元 素 。 要 是 把 它 放 到 了 文 
档 的 末尾 ， 那 么 等 不 到 Modernizr 发 挥 作 用 ， 浏 
览 器 就 已 经 开始 呈现 文档 并 应 用 样式 了 。 


a 11.3 JLA] 


为 了 让 读者 朋友 尝 尝 鲜 ， 下 面 我 们 就 介绍 一 些 有 
关 Canvas、 视 频 / 音 频 以 及 表单 的 例子 ， 看 一 看 

pa ad aa c 要 想 试验 以 下 的 示 

例 ， 需 要 下 列 浏览 器 


3É HR Safari 5+ 
谷歌 Chrome 6+ 
Mozilla Firefox 3.6+ 
Opera 10.6+ 

微软 IE 9+ 


11.3.1 Canvas 


每 个 浏览 器 都 可 以 显示 静态 图 片 。 通 过 GIF 可 以 
实现 一 些 动画 ， ， ee 
化 一 些 样式 ， 但 仅 此 而 已 。 要 想 与 静态 图 片 交 互 
可 就 难 上 加 难 了 。HTML5 的 <canvas> 元 素 让 这 
de 通过 它 可 以 动态 创建 和 操作 图 


在 网 页 中 文 起 一 块 * 男 布 ”(canvas) 很 简单 : 





«canvas id-"draw-in-me" width="120" height="40"> 
<p>Powered By HTML5 canvas</p> 
</canvas> 





FER IK“ MAR” E/E ER, Winer 外 一 回 事 了 。 
要 了 解 详细 的 绘画 方法 ， 请 参考 <canvas> 元 素 
的 规范 Chttp://www.whatwg.org/specs/web- 
apps/current-work/multipage/the-canvas- 


element.html ) 。 不 过 从 本 质 上 来 讲 ，<canvas> 
涉及 的 数学 及 定位 的 概念 与 Adobe Illustrator 等 基 








于 矢量 的 图 形 软 件 或 者 基于 矢量 的 编程 语言 没有 
太 大 的 差别 。 


注意 ”如 果 读 者 使 用 过 Tllustrator， 可 以 试 
试 使 用 Ai->Canvas 插 件 

(http://visitmix.com/labs/ai2canvas/ ) , He 
然 作为 “所 见 即 所 得 ”的 编辑 嚣 ， 人 免不了 会 在 
输出 中 生成 一 些 见 余 的 东西 ， 但 通过 手工 编 
辑 还 是 能 得 到 最 佳 效 果 的 。 


下 面 这 个 例子 利用 <canvas> 画 一 个 圆 角 小 黑 盒 
子 ， 带 有 2 像素 宽 的 白色 描 边 效果 。 








function draw() { 

var canvas = document.getElementById('draw-in-me! 

if (canvas.getContext) { 
var ctx = canvas.getContext( '2d'); 
ctx. beginPath(); 
ctx.moveTo(120.0, 32.0); 
ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112 
ctx.lineTo(8.0, 40.0); 
ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.4, 0.0, 32 
ctx.lineTo(0.0, 8.0); 
ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0 
ctx.lineTo(112.0, 0.0); 
ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120. 


ctx.lineTo(120.0, 32.0); 
ctx.closePath(); 
ctx.fill(); 
ctx.lineWidth = 2.0; 


ctx.strokeStyle 
ctx.stroke(); 
} 
} 


window.onload = draw; 


"rgb(255, 255, 255)"; 





在 这 个 例子 中 ， 变 量 ctx 引用 的 是 画布 的 绘图 空 
E] Ccontext) 。 所 请 绘图 空间 ， 在 这 里 就 是 一 个 
平面 二 维 的 绘图 表面 ， 其 原点 (0,0) 位 于 

«canvas» 的 左上 角 。 在 这 个 绘图 表面 的 坐标 系 





里 ， 越 往 右 x 的 值 越 大 ， 越 往 下 y 的 值 越 大 。 通 
过 在 绘图 空间 中 指定 坐标 点 ， 可 以 绘制 出 各 种 二 
维 的 形状 和 线条 。 在 绘制 线条 时 ， 还 可 以 添加 不 
同 的 填充 及 描 边 样式 。 


图 11-1 是 在 Chrome 中 显示 的 结果 : 








图 11-1 


当然 ， 这 个 例子 还 很 简陋 。 例 子 中 的 <canvas> 
元 素 使 用 了 与 其 他 2D 绘 图 库 相 似 的 API。 这 里 使 
用 了 几 个 点 和 曲线 从 一 个 点 到 另 一 个 点 创建 并 绘 
制 出 了 一 条 路 径 ， 但 <canvas> 可 不 仅仅 能 够 用 
21 cm 还 可 以 通过 它 来 显示 和 操作 位 


比如 说 ， 我 们 可 以 使 用 <canvas> 对 象 在 浏览 
中 把 一 幅 彩 色 图 片 变 成 灰 度 图 片 。 然 后 ， 当 用 户 
a 再 把 它 切 换 回 原始 的 


先 创建 一 个 HIML 文 件 ， 命 名 为 grayscale.html， 


其 中 有 一 幅 图 像 ， 与 脚本 位 于 同一 个 域 中 。 这 个 
页 面 里 也 使 用 f Modernizr: 


<!DOCTYPE html» 





«html lang="en"> 
<head> 
<meta charset="utf-8" /> 

<title>Grayscale Canvas Example</title> 

«script src-"scripts/modernizr-1.6.min.js"»«/scri 
«/head» 
«body» 
«img src-"images/avatar.png" id-"avatar" title-"Je 
<script src="scripts/grayscale.js"></script> 
</body> 
</html> 





再 创建 一 个 grayscale.js 文件 ， 并 在 其 中 添加 
如 下 脚本 : 





function convertToGS(img) { 


// 如 果 浏 览 器 不 支持 <canvas> 就 返回 


if (!Modernizr.canvas) return; 





// 存储 原始 的 彩色 版 


img.color = img.src; 


// 创建 灰 度 版 


img.grayscale = createGSCanvas(img); 


// 在 mouseover/out 事件 发 生 时 切换 图 片 

img.onmouseover = function() { 
this.src = this.color; 

j 

img.onmouseout - function() ( 
this.src - this.grayscale; 


} 








img.onmouseout(); 
} 
function createGSCanvas(img) { 
var canvas=document.createElement ("canvas") ; 


canvas.width= img.width; 
canvas. height=img.height; 


var ctx=canvas.getContext("2d"); 
ctx.drawImage(img,0,0); 


// YER: getImageData WHEE YE SHA Ai T E — AE Rr 
var c = ctx.getlImageData(0, ©, img.width, img.hei 
for (i20; i«c.height; i++) ( 
for (j20; j«c.width; j++) ( 
var x = (i*4) * c.width + (j*4); 
var r = c.data[x]; 
var g = c.data[x+1]; 
var b = c.data[x+2]; 
c.data[x] = c.data[x+1] = c.data[x+2] = (r+g 
} 
} 


ctx.putImageData(c,0,0,0,0, c.width, c.height); 


return canvas.toDataURL(); 


} 
// 添加 1oad 事件 。 如 果 有 其 他 脚本 ， 可 以 使 用 addLoadEven 


window.onload = function() { 
convertToGS (document. getElementById('avatar')); 


} 





























注意 ”在 从 图 片 之 类 的 文件 中 读 取 数据 
时 ， 不 同 浏 览 器 有 不 同 的 安全 考虑 。 为 了 保 
证 这 个 例子 正常 运行 ， 必 须 在 同一 个 站 点 中 
提供 图 片 和 文档 。 而 且 ， 就 算 在 本 地 硬盘 中 
使 用 file 协议 加 载 这 个 页 面 ， 例 子 也 无 法 
运行 。 虽 然 可 以 修改 浏览 器 的 安全 设置 ， 但 
我 还 是 建议 把 这 个 例子 的 相关 文件 都 上 传 到 
Web 服 务 嚣 中。 


页 面 加 载 后 ， 脚 本 通过 在 convertToGS 函数 中 
应 用 onmouseover 和 onmouseout 事件 处 理 函 数 
来 修改 avatar.png 图 片 。 











img.color = img.src; 

img.grayscale = createGSCanvas(img) ; 

img.onmouseover = function() { 
this.src=this.color; 

} 

img.onmouseout = function() { 
this.src=this.grayscale; 


} 





上 述 事件 处 理 函 数 会 切换 保存 在 图 片 的 src 属性 
中 的 原始 彩色 版 ， 以 及 createGSCanvas 函数 创 
建 的 灰 度 版 。 


为 了 在 createGSCanvas 函数 中 把 彩色 图 片 转换 
为 灰 度 图 片 ， 我 们 创建 了 一 个 新 的 canvas 元 
素 ， 然 后 在 其 绘图 环境 中 绘制 了 彩色 图 片 : 


var canvas-document.createElement("canvas"); 
canvas.width- img.width; 
canvas.height-img.height; 


var ctx=canvas.getContext("2d"); 
ctx.drawImage(img,0,0); 





ROR, UA GR ARs, ORTUS DI P 
的 每 一 个 像素 ， 将 每 个 彩色 像素 的 红 、 绿 、 蓝 彩 
色 成 分 求 平 均值 ， 得 到 对 应 彩色 值 的 灰 度 值 。 





var c = ctx.getImageData(6，6，img.width，img.heig 
for (i20; i«c.height; i++) { 
for (j20; j«c.width; j++) { 
var x = (i*4) * c.width + (j*4); 


var r = c.data[x]; 
var g = c.data[x+1]; 
var b = c.data[x+2]; 


c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b 
} 


ee 
Fel BR) ETE ee TE A PE t BRI Be f HY 222 E] 


c 并 返回 原始 的 图 像 数 据 作为 新 灰 度 图 片 
TU 








ctx.putImageData(c, 0, 0, ©, ©, c.width, c.height) ; 
return canvas.toDataURL(); 





这 样 ， 即 使 我 们 只 提供 彩色 版 图 片 ， 也 可 以 在 该 
图 像 的 彩色 版 与 灰 度 版 之 间 切 换 了 。 


为 什么 使 用 <canvas> 而 不 是 多 张 图 片 呢 ?只 有 
在 基于 用 户 操 作 实 现 交 互 时 ， 使 用 <canvas> 的 
优势 才 会 显现 出 来 。 以 前 ， 要 想 在 浏览 器 中 实现 
高 级 的 图 片 交 互 功 能 ， 只 能 依靠 Flash 或 
Silverlight 这 样 的 插件 。 今 天 ， 有 了 <“<canvasy> ， 
就 可 以 在 浏览 器 窗口 绘制 任何 对 象 、 任 何 像素 
了 。 当 然 ， 还 能 通过 它 来 操作 图 像 ， 或 者 创建 令 
人 眼花 综 乱 的 界面 元 素 。 可 是 ， 就 跟 使 用 Flash 一 
样 ， 也 绝对 不 能 滥用 <canvas> 。 换 句 话说 ， 即 
使 你 真 的 可 以 在 一 个 <canvas> 元 素 里 创建 一 个 
站 点 ， 也 不 表示 你 应 该 那样 做 。 


此 外 ， 你 还 得 考虑 到 那些 使 用 屏幕 阅读 器 或 其 他 
辅助 浏览 技术 的 用 户 。HTML5 的 这 个 <canvasy> 
元 素 跟 Flash 一 样 ， 都 不 具备 可 访问 性 ， 会 给 那些 
用 户 带 来 同样 的 烦恼 。 记 住 ， 不 要 被 先进 技术 的 
光环 左右 了 你 的 心智 ， 必 要 时 还 要 留 一 手 。 








11.3.2 ”音频 和 视频 
谈 到 HTML5 WC, AMIN ER L HR N 


B<video> 和 它 的 杀 兄 第 <audio> 了 。 这 两 个 元 
素 让 HTML 具 有 了 原生 视频 和 音频 的 能 力 ， 但 也 
带 来 了 一 些 不 好 处 理 的 问题 。 


在 HIML5 之 前 ， 回 网 页 中 藤 入 视频 需要 用 到 一 

大 堆 重 复 的 <cobject> 和 <embed> 元 素 ， 其 中 一 
些 在 HIML4 中 甚至 都 无 法 通过 有 效 性 验 

WE. <object> 可 以 引用 各 种 影片 播放 器 ， 例 如 
QuickTime、RealPlayer 或 Flash， 并 使 用 这 些 插件 
在 浏览 器 中 播放 影片 。 举 个 例子 ， 以 下 束 是 散 入 
Flash 影 片 的 代码 (想必 你 一 定 训 得 很 眼熟 〉: 








<object classid="clsid:d27cdb6e-ae6d-11cf-96b8- 
444553540000" width="100" height="100" 
codebase="http://fpdownload. adobe. com/pub/shockwav4d 
<param name="movie" value="moviename.swf"> 

<param name="play" value="true"> 

<param name="loop" value="true"> 

<param name="quality" value="high"> 


«embed src="moviename.swf" width="100" height="100' 
play="true" loop="true" quality="high" 
pluginspage-" http://get.adobe.com/flashplayer" /» 
</object> 





除了 这 些 代码 之 外 ， 第 三 方 插件 也 有 各 自 的 问题 
和 局 限 性 。 要 想 让 先入 的 代码 发 挥 作用 ， 浏 览 需 
中 必须 安装 相应 的 插件 ， 而 且 版 本 还 要 合适 。 插 
件 是 在 一 个 封闭 的 环境 中 运行 的 ， 通 过 脚本 无 法 
修改 或 者 操作 视频 内 容 。 如 宁 插 件 没有 提供 
c» 插件 运行 环境 无 寞 于 文档 中 的 一 个 独立 王 
到 。 


HTML5 的 <video> 元 素 为 在 文档 中 般 入 影片 以 


及 与 影片 区 互 定义 了 一 种 标准 方式 ， 同 时 也 把 给 
入 操作 简化 成 了 一 个 标签 : 


<video src="movie.mp4"> 











<!-- Alternative content when video is not suppo 
<a href="movie.mp4">Download movie.mp4</a> 
</video> 





ZERIKA S—Bomp4 aan, Fra Foul vas 
Ax Fi«video» 时 的 奉 代 下 载 链接 。 


类 似 地 ，<audio> 元 系 的 用 法 也 差不多 : 


«audio src="sound.ogg"> 
<!-- Alternative content when audio is not suppo 
<a href="sound.ogg">Download sound.ogg</a> 


</audio> 








简单 、 朴 素 ， 还 很 吸引 人 ， 是 吗 ? 除非 它 总 能 如 


a. 也 有 混乱 的 时 候 


让 人 失望 的 是 ，HTML5 的 <video> 和 
«audio» 元 素 也 有 那么 点 小 问题 。 这 两 个 标 
签 都 很 简单 ， 也 都 有 相应 的 属性 用 于 显示 播 
放 控 件 或 更 改 播放 设置 ， 但 是 它 并 未 说 明 支 
持 哪 些 视频 格式 。 


要 搞 清 楚 有 关 视 频 格式 的 问题 ， 必 须 从 什么 
古 视频 说 起 。 


像 movie .mp4 这 样 的 视频 ， 其 实 是 一 个 包含 
很 多 东西 的 容器 。 扩 展 名 mp4 表 示 视 频 是 使 
用 基于 苹果 QuickTime 技 术 的 MPEG4 打 包 而 
成 的 。 这 个 容器 规定 了 不 同 的 音频 和 视频 轨 
道 在 文件 中 的 位 置 ， 以 及 其 他 与 回放 相关 的 
特性 。 其 他 容器 还 有 m4v 〈 另 一 个 MPEG4 扩 - 














展 名 ) ~ avi (Audio Video Interleave, 77 Hil 
视频 交错 ) 、flv (Flash Video) ， 等 等 。 


在 每 个 影 广 容器 中 ， 音 频 和 视频 轨道 都 使 用 
不 同 的 编 解 码 器 来 编码 。 编 解码 器 决定 了 浏 
唤 占 在 播放 时 应 该 如 何 解码 首 频 和 视频 。 编 
RNS AS BUE EIAS FT 
储 视 频 ， 以 减少 原始 文件 的 大 小 ， 同 时 可 能 
会 也 可 能 不 会 损失 品质 。 视 频 编 解 码 器 也 有 
很 多 种 ， 其 中 有 代表 性 的 有 三 个 : H.264、 
Theora 和 VP8。 同 样 ， 首 频 文件 也 有 相应 的 
编 解码 器 ， 常 见 的 有 mp3 CMPEG-1 Audio 
Layer 3) 、aac (Advanced Audio Coding) 
和 ogg (Ogg Vorbis) . 


注意 ”H.264 编 解码 器 存在 一 个 非 技 术 
问题 ， 即 使 用 许可 。 使 用 H.264 的 解码 
器 和 编码 器 都 要 付费 ， 分 发 经 编码 许可 
制作 的 H.264 内 容 不 用 付费 ， 但 要 对 其 
解码 则 必须 得 到 许可 。 换 句 话 说 ， 在 你 
自己 的 网 站 上 发 布 H.264 影 片 不 用 交 

钱 ， 但 需要 对 其 解码 的 浏览 器 开发 商 以 
及 开发 解码 软件 的 软件 开发 商都 要 得 到 
许可 才 行 。 为 了 解决 视频 格式 的 许可 问 
题 ， 谷 歌 把 VP8 编 解码 堪 〈 在 WebM 容 
器 中 ) 的 专利 权 发 布 到 了 公共 域 ， 并 承 
诺 永 不 收回 。 他 们 的 愿望 是 让 浏览 器 开 
发 丙 在 实现 WebM/VP8/Vorbis 时 不 受 许 
可 限制 ， 并 向 所 有 人 提供 一 种 公共 的 格 


A. 














这 些 不 同 的 容器 格式 以 及 编 解码 器 给 我 们 市 
来 了 什么 问题 呢 ? 问题 就 是 没有 一 于 浏览 器 
文 持 所有 容器 和 编 解 码 器 ， 因 此 我 们 必须 提 
HES RE I. Firefox Hy) LENKA, 
Chrome L4 & Opera x #Theora/Vorbis/Ogg; 
IE9. Safari, Chrome. Mobile Safari 以 及 





Android X #H.264/ACC/MP4, TfiIE9, 
Firefox, Chrome Opera: FFWebM (VP8 
和 Vorbis 的 男 一 种 容器 格式 ) 。 


如 此 混乱 的 结果 意味 着 没有 哪些 格式 可 以 跨 
浏览 器 。 但 愿 这 个 问题 在 不 久 的 将 来 能 够 解 
决 ， 否 则 视频 这 一 块 会 让 整个 HTML5 巾 然 
失色 。 眼 下 看 来 ， 为 了 保证 每 个 人 都 能 看 到 
视频 ， 必 须 制 作 多 种 格式 的 视频 并 
fE<video> 元 素 中 包含 多 个 来 源 : 











<video id="movie" preload controls> 
<source src="movie.mp4" /> 
<source src=" movie.webm" 
type-'video/webm; codecs="vp8, vorbis"' / 
«source src="movie.ogv" 
type='video/ogg; codecs="theora, vorbis"' 
<p>Download movie as 


<a href="movie.mp4">MP4</a>, 

«a href="movie.webm" >WebM</a>, 

or «a href="movie.ogv">Ogg</a>.</p> 
«/video» 





为 了 确保 HTML5 的 最 大 兼容 性 ， 至 少 要 包 
含 下 列 三 个 版 本 : 


e 基于 H.264 和 AAC 的 MP4 

e WebM (VP8+Vorbis) 

e 基于 Theora 视 频 和 Vorbis 音 频 的 Ogg 文 
件 


这 个 例子 中 没有 给 出 可 蔡 代 的 插件 版 。 为 了 
确保 最 大 程度 地 兼容 那些 不 支持 HIML5 的 
浏览 器 ， 一 般 还 应 该 准备 一 个 Flash 或 
QuickTime 插 件 版 视频 。 但 在 这 里 ， 为 鼓励 
用 户 升 级 到 较为 先进 的 浏览 器 ， 我 提供 了 直 
接 下 载 不 同 格式 文件 的 链接 。 





注意 “不 同 的 视频 格式 的 排列 次 序 也 

是 一 个 问题 。 把 MP4 放 在 第 一 位 ， 是 为 
了 让 保证 iPad、iPhone 及 iPod Touch 等 运 
行 iOS 的 设备 能 够 顺利 读 取 视频 。 因 为 

iOS 4 之 前 版 本 中 的 Mobile Safari 只 能 解 
析 一 个 <video> 元 素 ， 故 而 把 针对 iOS 
的 格式 放 在 了 最 前 面 。 


总 之 ， 这 些 问题 让 HTML5 视 频 和 音频 变 得 
有 点 乱 ， 一 定 程 度 上 影响 了 它 的 吸引 力 。 想 
想 要 制作 同一 视频 的 多 个 版 本 ， 并 且 要 保存 
三 个 甚至 更 多 个 文件 ， 有 人 不 禁 会 问 : 既然 
最 后 还 是 要 提供 Flash 版 本 ， 那 为 什么 不 直接 
就 提供 一 个 Flash 影 片 算 了 ? 3e Inl Bil a 
容 ， 提 供 较 新 的 <videoy> 元 素 ， 可 以 在 支持 
mau PESS ener erie 
Il. 


对 HTML5 视 频 ， 可 以 《或 将 来 可 以 ) 应 用 
CSS 属 性 以 修改 视频 的 外 观 、 大 小 及 形状 ， 
可 以 添加 字幕 和 歌词 等 信息 ， 还 可 以 组 合 视 
频 和 画布 来 覆盖 内 容 。 甚 至 可 以 把 视频 插入 
到 <canvas> 对 象 中 ， 像 前 面 处 理 灰 度 图 片 
一 样 ， 通 过 分 析 图 像 来 检测 视频 运动 。 


下 面 通过 一 个 例子 来 说 明 <video> 元 素 的 
API， 看 看 怎样 定制 视频 控件 ， 怎 样 创建 简 
单 的 播放 按钮 。 


. 目 定 义 控 件 


浏览 器 在 显示 <video> 元 素 时 ， 会 为 其 添加 

- 些 与 浏览 器 样式 统一 的 标准 播放 控件 。 要 

想 目 定义 这 些 控 件 的 外 观 ， 或 者 添加 新 的 控 
hs 


e currentTime ， 返 回 当前 播放 的 位 























置 ， 以 秒表 示 ; 

。duration ， 返 回 媒体 的 总 时 长 ， 以 秒 
表示 ， 对 于 流 媒 体 返 回 无 穷 大 ; 

e paused ， 表 示 媒 体 是 否 处 于 暂停 状 


JU o 





此 外 ， 还 有 一 些 与 特定 媒体 相关 的 事件 ， 可 
以 用 来 触发 你 的 脚本 。 主 要 事件 有 : 


e play ， 在 媒体 播放 开始 时 发 生 ; 

。 pause ， 在 媒体 暂停 时 发 生 ; 

。 loadeddata ， 在 媒体 可 以 从 当前 播放 
位 置 开 始 播 放 时 发 生 ; 

° eus 在 媒体 已 播放 完成 而 停止 时 发 


使 用 这 些 及 其 他 属性 和 事件 ， 可 以 轻松 地 创 
建 自 定义 的 视频 控件 ， 实 现 对 视频 的 各 种 控 
制 。 从 暂停 和 播放 按钮 到 滑动 条 (进度 

条 ) ， 都 没有 问题 。 


不 管 创 建 什么 控件 ， 都 别 筷 了 在 <videoy> 元 
素 中 添加 controls 属性 : 


<video src="movie.ogv" controls> 


这 行 代码 会 呈现 出 一 个 类 似 Chrome 浏 览 器 
中 所 示 的 常见 的 播放 控制 界面 ， 如 图 11-2 所 
示 ， 但 其 中 的 控件 可 以 通过 脚本 来 移 走 。 








00:11 «4» 


图 11-2 


下 面 就 运用 我 们 掌握 的 DOM 脚 本 技能 ， 来 
创建 一 些 简 单 的 视频 控件 。 


注意 ”读者 如 果 需 要 示例 文件 ， 可 以 
AAhttp://www.friendsofed.com/ 中 本 书页 
面 下 载 源 代码 。 


第 一 步 先 创建 一 个 简单 的 HIML 页 面 ， 命 名 
为 movie html 。 在 其 中 添加 一 个 <videoy> 
元 素 ， 并 按照 前 面 的 介绍 指定 多 种 视频 格 
式 。 此 外 ， 页 面 中 还 要 包含 player.css $F 
式 表 和 player.js 脚本 : 





<!DOCTYPE html» 
<html lang="en"> 
<head> 


<meta charset="utf-8" /> 

<title>My Video</title> 

<link rel="stylesheet" href="styles/player. 
</head> 
<body> 


«div class="video-wrapper"> 
<video id="movie" controls> 
<source src="movie.mp4" /> 
«source src=" movie.webm" 
type-'video/webm; codecs="vp8, vorbis"' 
«source src="movie.ogv" 
type-'video/ogg; codecs-"theora, vorbis" 
«p»Download movie as 


<a href="movie.mp4">MP4</a>, 
«a href="movie.webm">WebM</a>, 
or «a href-"movie.ogv"»0gg«/a».«/p» 
«/video» 
</div> 


«script src="scripts/player.js"></script> 
</body> 
</html> 





fEplayer.js 文件 中 ， 我 们 要 修改 页 面 中 的 
所 有 <video> 元 素 ， 删 除 其 内 置 控 件 并 添加 
自 定 义 的 Play 投 钮 。 把 下 面 两 个 完整 的 函数 
添加 到 player.js 文件 中 : 





function createVideoControls() { 
var vids = document.getElementsByTagName( ' vi 
for (var i = 0 ; i < vids.length ; i++) { 
addControls( vids[i] ); 
} 
} 


function addControls( vid ) { 
vid.removeAttribute('controls'); 
vid.height - vid.videoHeight; 
vid.width = vid.videoWidth; 
vid.parentNode.style.height - vid.videoHeig 
vid.parentNode.style.width - vid.videoWidth 


var controls = document.createElement('div') 
controls.setAttribute('class', 'controls'); 


var play = document.createElement('button'); 
play.setAttribute('title', 'Play'); 
play.innerHTML = '&#x25BA;'; 
controls.appendChild(play) ; 


vid.parentNode.insertBefore(controls, vid); 


play.onclick = function () { 


if (vid.ended) ( 
vid.currentTime - 0; 


if (vid.paused) ( 
vid.play(); 
) else { 
vid.pause(); 
} 
n 


vid.addEventListener('play', function () { 
play.innerHTML = '&4x2590;814x2590; '; 
play.setAttribute('paused', true); 

), false); 


vid.addEventListener('pause', function () ( 
play.removeAttribute( 'paused'); 
play.innerHTML = '&#x25BA;'; 

}, false); 


vid.addEventListener('ended', function () { 
vid.pause(); 
}, false); 
} 


window.onload = function() { 
createVideoControls(); 


} 





脚本 文件 player.js 中 的 这 两 个 函数 准备 完 
成 很 多 任务 。 首 先 ， 找 到 页 面 中 的 video 元 
素 ， 然 后 对 它们 分 别 应 用 addControls ek 
数 : 





function createVideoControls() { 
var videos = document. getElementsByTagName(' 
for (var i = 0 ; i « videos.length ; i++) ( 
addControls( videos[i] ); 
j 
j 





fEaddControls 函数 中 ， 我 们 删除 了 video 
元 素 原来 的 controls 属性 ， 从 而 去 掉 其 内 
置 的 控件 ， 接 着 义 创 建 了 几 个 DOM 对 象 ， 
用 来 充当 Play/Pause 按 钮 ， 并 把 它们 都 添加 
为 video 元 素 的 子 元 素 。 








function addControls( vid ) { 


vid.removeAttribute('controls'); 


vid. height = vid.videoHeight ; 

vid.width = vid.videoWidth; 
vid.parentNode.style.height = vid.videoHeig 
vid.parentNode.style.width = vid.videoWidth 


var controls = document.createElement('div') 
controls.setAttribute('class', 'controls'); 


var play = document.createElement('button'); 
play.setAttribute('title', 'Play'); 
play.innerHTML = '&#x25BA;'; 
controls.appendChild(play) ; 


vid.parentNode.insertBefore(controls, vid); 





接 下 来 ， 给 Play 按钮 添加 一 个 clLick 事件 ， 
以 便 单 击 它 播放 影片 : 





play.onclick = function () { 
if (vid.ended) ( 
vid.currentTime - 0; 


if (vid.paused) ( 
vid.play(); 
) else { 
vid.pause(); 
} 
}; 


Pp 


最 后 ， 利 用 play pause 和 ended 事件 来 
修改 Play 按钮 的 状态 ， 并 在 影片 未 暂停 的 情 
况 下 显示 Pause 按 钮 。 





vid.addEventListener('play', function () { 
play.innerHTML = '&4x2590;84x2590;'; 
play.setAttribute('paused', true); 

}, false); 


vid.addEventListener('pause', function () ( 
play.removeAttribute( 'paused'); 
play.innerHTML = '&4x25BA;'; 

), false); 


vid.addEventListener('ended', function () ( 
vid.pause(); 
), false); 





注意 BURA RATERS YS, KEME 
用 的 是 addEventListener 方法 为 视频 
添加 事件 。addEventListener 是 为 对 
象 添 加 事件 处 理 函 数 的 规范 方法 。 之 前 
我 们 使 用 onclick 之 类 的 HTML-DOM 
的 on 前 级 属性， 是 因为 EE CE 8 及 以 前 
版 本 ) 使 用 的 是 一 个 不 同 的 
attachEvent 方法 。 而 到 了 IE 9， 它 支 
持 <video> ， 也 是 完成 本 章 示 例 必 有 需 
的 ， 也 开始 支持 规范 的 
addEventListener 方法 了 。 因 此 ， 在 
0 问题 


为 了 给 控件 添加 样式 ， 需 要 在 player.css 
中 添加 下 列 CSS 样 式 。 可 以 使 用 CSS 对 控件 
外 观 随心 所 欲 地 更 改 : 





.Video-wrapper { 
overflow: hidden; 


} 


.Video-wrapper .controls { 
position: absolute; 
height:30px; 
width:30px; 
margin: auto; 
background: rgba(0,0,0,0.5); 

} 


.Video-wrapper button { 
display: block; 
width: 100%; 
height: 1005; 
border: 0; 
cursor: pointer; 
font-size: 17px; 
color: #fff; 
background: transparent; 


} 


.Video-wrapper button[paused] { 
font-size: 12px; 


} 





页 面 加 载 完 成 后 ，window.1oad 事件 就 会 
执行 createVideoControls 函数 ， 结 果 就 
会 得 到 一 个 相对 粗糙 的 视频 控制 界面 ， 可 以 
用 来 播放 和 暂停 视频 ， 如 图 11-3 所 示 。 





图 11-3 
这 个 简单 的 例子 只 包含 最 基本 的 控件 ， 在 此 











基础 上 ， 还 可 以 利用 相应 的 属性 和 事件 添加 
市 位 置 指示 器 的 滑动 条 、 时 间 惟 ， 以 及 其 他 
特殊 的 控件 。 到 底 添 加 哪个 控件 ， 完 全 由 你 
说 了 算 。 建 议 大 家 抽空 学 习 一 下 HTML5 视 
频 规范 中 其 他 与 视频 相关 的 属性 ， 地 址 
Jyhttp://www.whatwg.org/specs/web- 
apps/current-work/multipage/video.html#video 
。 男 外 ， 也 可 以 访问 
http://www.w3.org/2010/05/video/mediaevents. 
， 看 看 其 中 给 出 的 一 些 实例 。 最 后 ， 给 大 家 
推荐 一 本 书 ， 女 博士 Silvia PfeifferBt 7] The 
Definitive Guide to HTML5 Video (Apress, 
2011) ， 看 看 使 用 <video> 元 素 还 能 做 哪些 
事 。 





11.3.3 ”表单 


我 们 要 介绍 的 最 后 一 个 HTML5 元 素 就 是 表 
单 。 表 单 的 身影 几乎 可 以 在 任何 一 个 网 页 中 
看 到 ， 但 在 HIML5 之 前 ， 可 用 的 输入 控件 
类 型 却 少 得 可 怜 。 文 本 框 、 单 选 按钮 、 复 选 
框 对 于 简单 的 表单 是 够 用 了 ， 但 在 需要 更 多 
交互 功能 的 时 候 ， 仍 然 免 不 了 求 诸 DOM 脚 
本 披挂 上 阵 。 如 果 想 让 用 户 更 方便 地 在 表单 


中 输入 日 期 ， 就 得 自己 构建 界面 和 必要 的 
JavaScript。 老 天 有 眼 ，HTML5 给 我 们 带 来 
了 很 多 新 表单 元 素 、 新 输入 控件 类 型 和 新 的 
属性 ， 帮 我们 实现 了 这 些 功能 。 不 过 ， 跟 以 
全 
用 场 的 。 


新 的 输入 控件 类 型 包括 : 


email ， 用 于 输入 电子 邮件 地 址 ; 
url ， 用 于 输入 URL; 

date ， 用 于 输入 日 期 和 时 间 ; 
number ， 用 于 输入 数值 ; 
range ， 用 于 生成 滑动 条 ; 
search ， 用 于 搜索 框 ; 

tel ， 用 于 输入 电话 号 码 ; 
color, ATARE. 


这 些 新 类 型 比 单纯 的 type="text" 好 用 多 
了 。 浏 览 器 知道 这 些 控件 都 接受 什么 类 型 的 
输入 ， 因 此 可 以 为 它们 配备 不 同 的 输入 控 
件 ， 例 如 在 移动 设备 上 更 换 不 同 的 软 键盘 。 
图 11-4 中 两 幅 图 是 iPhone 中 Mobile Safari 的 界 
面 ， 一 幅 是 针对 文本 输入 框 的 键盘 ， 一 幅 是 
针对 电子 邮件 地 址 的 键盘 。 
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图 11-4 
相应 地 ， 新 的 属性 包括 如 下 这 些 。 
e autocomplete ， 用 于 为 文本 (text) 


输入 框 添 加 一 组 建议 的 输入 项 ; 
autofocus ， 用 于 让 表单 元 素 自动 获得 





e form， 用 于 对 <form> 标签 外 部 的 表单 
元 素 分 组 ; 


min 、max 和 step ， 用 在 范围 
(range) 和 数值 Cnumber) 输入 框 


m; 

pattern ， 用 于 定义 一 个 正则 表达 式 ， 
以 便 验 证 输入 的 值 ; 

placeholder ， 用 于 在 文本 输入 框 中 
显示 临时 性 的 提示 信息 ; 
。required ， 表 示 必 填 。 


这 些 属性 把 很 多 原来 由 DOM 脚 本 负责 的 任 
务 都 转移 给 了 浏览 器 ， 例 如 提供 自 动 完成 的 
建议 项 和 验证 表单 输入 。 但 我 们 要 关注 的 问 
vs 在 浏览 器 不 支持 新 的 类 型 和 属性 时 怎 
A Jh. 
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件 ， 因 为 它们 都 向 后 兼容 ( 某 种 程度 上 如 
此 ) 。 对 于 HTML5 的 电子 邮件 输入 框 而 


«input type-"email" /> 


IF DU] as ZR RA Atext ， 并 呈现 
出 标准 的 文本 输入 框 。 对 于 email 
或 search 类 型 的 输入 框 来 说 ， 这 不 会 造成 








什么 大 问题 ， 但 对 于 range 滑动 条 就 不 行 
了 。 想 象 一 下 ， 原 本 应 该 是 滑动 条 ， 但 现在 
Ale — AE, Hecht Safart RITE S 3c 
range 控件 ， 如 图 11-5 所 示 。 

















图 11-5 
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使 用 本 章 前 面 提 到 的 Modernizr 库 ， 就 可 以 
进行 兼容 性 检查 。 比 如 ， 要 检查 浏览 右 是 谷 
文 持 某 个 输入 类 型 的 控件 ， 可 以 使 

用 inputtypes . type 属性 : 





If ( !Modernizr.inputtypes.date ) { 
// 生成 日 期 选择 器 的 脚本 








} 





而 要 检查 某 个 属性 ， 则 可 以 使 
用 input.attribute 属性 : 


if ( !Modernizr.input.placeholder ){ 
// 生成 占 位 符 提 示 信 息 的 脚本 





} 





没有 使 用 Modernizr， 可 以 使 用 下 面 这 





是 
nputSupportsType 函数 来 检查 浏览 器 
否 文 持 某 种 类 型 的 输入 控件 : 





E 
Ai 
E 

KE 


function inputSupportsType(type) { 
if (!document.createElement) return false; 
var input = document.createElement('input'); 
input.setAttribute('type',type); 
if (input.type == 'text' && type != 'text') 
return false; 


} else { 
return true; 
} 
} 





fi A inputSupportsType 函数 的 方式 与 使 
用 Modernizr 一 样 : 


if ( linputSupportsType('date') ) ( 
// 生成 日 期 选择 器 的 脚本 
} 











要 检查 特定 的 属性 ， 可 以 使 用 下 面 这 
个 elementSupportsAttribute 函数 : 


function elementSupportsAttribute(elementName, 
if (!document.createElement) return false; 
var temp = document.createElement(elementNa 
return ( attribute in temp ); 


} 





^i FjelementSupportsAttribute 函数 的 
方法 还 是 那样 ， 只 不 过 需要 传 入 元 素 名 和 要 
检查 的 属性 名 : 





if ( lelementSupportsAttribute( 'input', ‘pla 
// 生成 占 位 符 提 示 信 息 的 脚本 
} 
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在 稳妥 的 特性 检查 的 基础 上 ， 就 可 以 一 方面 
试用 新 的 HTML5 表 单元 素 ， 男 一 方面 提供 
备用 的 DOM 脚 本 ， 以 便 浏览 器 不 支持 某 种 
类 型 或 属性 时 “挺身 而 出 ”。 


举 个 例子 ， 假 设 你 想 在 自己 的 文本 输入 框 中 
加 入 占 位 符 信 息 。 在 HTML5 中 ， 只 要 像 下 
面 这 样 使 用 placeholder 就 行 了 : 











<input type="text" id="first-name" placeholde 








在 Safari 或 Chrome 浏 览 器 中， 占 位 符 会 在 用 
户 尚 未 输入 值 的 情况 下 显示 指定 的 临时 文 
本 ， 如 图 11-6 所 示 。 


[Your First Name | 


图 11-6 

要 在 不 支持 placeholder 属性 的 浏览 器 中 
实现 相同 的 效果 ， 束 得 编写 一 个 简单 的 
DOM 脚 本 来 完成 同样 的 功能 : 





if ( !Modernizr.input.placeholder ) { 
var input = document. getElementById('first- 
input.onfocus = function () { 
var text = this.placeholder || this.getAt 
if ( this.value == text 


) { 
// 重 置 输入 框 的 值 ， 以 隐藏 临时 的 占 位 符 文 本 








this.value = ''; 


} 


input.onblur = function () { 
if ( this.value == '' ) ( 
// 把 输入 框 的 值 设 置 为 占 位 符 文 本 
this.value = this.placeholder || this.g 
} 
} 
// 在 onblur 处 理 函 数 运 行 时 中 添加 占 位 符 文 本 
input.onblur(); 
































当然 ， 这 个 蔡 代 方案 的 主要 问题 是 必须 依赖 
于 JavaScript 实 现 同样 的 功能 。 因 此 ， 还 必须 
考虑 到 在 JavaScript 不 可 用 的 情况 下 选择 什么 
输入 控件 最 合适 。 


要 作为 后 备 的 高 级 功能 (如 上 自动 完成 和 滑动 
条 ) 越 多 ， 开 发 工作 量 束 越 大 ， 占 用 时 间 束 
越 多 。 所 以 还 建议 大 家 选择 已 有 的 一 些 帮 我 
们 完成 了 相应 功能 的 库 。 要 了 解 有 关 

JavaScript 库 的 相关 内 容 ， 请 参考 本 书 附录 。 


8 11.4 HTML5 还 有 其 他 特性 吗 


A! 本 章 前 面 介 绍 的 这 几 个 标签 和 属性 只 是 
HITML5 的 冰山 一 角 而 已 。 请 读者 注意 ， 
HTML5 这 个 规范 至 今 仍然 没有 人 尘埃 落 定 ， 
很 多 地 方 都 有 可 能 发 生变 化 。 在 浏览 器 支持 
不 是 特别 完善 的 情况 下 ， 全 面 转 入 HTML5 
还 为 时 过 早 ， 但 这 不 会 影响 我 们 继续 探索 的 
兴致 。 比 如 ，HTML JavaScript API 可 是 我 们 
大 家 期 望 已 久 的 了 。 等 不 了 多 长 时 间 ， 我 们 
就 可 以 享受 HTML5 的 诸多 便捷 功能 了 。 


e 使 用 localStorage 和 sessionStorage 在 客户 
端 存 储 大 型 和 复杂 数据 集 的 更 有 效 方案 
Chttp://dev.w3.org/htm15/webstorage 
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。 [iH WebSocket 5 I 25 ar tm ALAS ETT 2T 
放 的 双 癌 通信 
Chttp://dev.w3.org/html5/websockets/ 


) ; 
e 使 用 Web Worker 在 后 台 执 行 
JavaScript Chttp://www.whatwg.org/specs, 
workers/current-work/ ) ; 
标准 化 的 拖 放 实 现 
Chttp://www.whatwg.org/specs/web- 
apps/current- 
work/multipage/dnd.html#dnd ) ; 
在 浏览 器 中 实现 地 理 位 置 服务 
Chttp://www.w3.org/TR/geolocation- 
API/ ) 。 


这 些 新 功能 并 不 都 与 DOM 相 关 ， 但 它们 却 
是 你 应 该 了 解 和 掌握 并 在 不 久 的 将 来 每 天 都 
会 使 用 的 ， 所 以 最 好 提前 多 花 些 时 间 熟 悉 它 


1i]. 


要 了 解 更 多 相关 内 容 和 示例 ， 请 参考 以 下 资 


e W3C HTMLS Working 
Draft: http://www.w3.org/TR/html5 ; 

e WHATWG HTML5 (包含 开发 中 的 下 
= 
Ñ) : http://www.whatwg.org/specs/web- 
apps/current-work ; 

。 HTML5 的 交互 性 演 
zw: http://html5demos.com/ ; 

e HTML5 相 关 的 PPT、 代 码 、 示 例 及 教 
fÆ: http://www.html5rocks.com/ ; 

e Dive into HTML5 ， 作 者 Mark 
Pilgrim: http://diveintohtml5.org/ ; 


g 11.5 “pas 


本 章 ， 我 们 了 解 了 HTML5 以 及 使 用 
Modernizr 等 工具 检测 特性 的 重要 性 。 同 时 
也 编写 了 几 个 例子 ， 介 绍 如 何 使 用 特性 检测 
来 确保 为 新 的 HIML5 特 性 提供 后 备 功 能 。 

本 章 介 绍 的 HTML5 的 新 特性 包括 : 


可 以 用 来 在 文档 中 绘制 矢量 及 位 图 的 
<canvas> 元 素 ; 

可 以 免 插 件 而 直接 在 网 页 中 髓 入 音频 和 
视频 的 <audio> 和 <video> 元 素 ; 

可 以 为 你 提供 更 广泛 选择 的 新 的 表单 控 
件 类 型 以 及 新 的 属性 。 

到 目前 为 止 ， 我们 掌握 的 DOM 脚 本 编程 技 
能 都 处 于 各 目 为 战 的 状态 。 下 一 章 ， 我 们 就 
把 前 面 学 到 的 所 有 概念 和 技术 综合 起 来 ， 创 
符 一 个 项 目 。 


到 了 融会 员 通 学 以 致 用 的 时 候 了 。 


B12 综合 示例 


本 章 内 容 


。 组 织 内 容 

。 应 用 样式 

e 使 用 JavaScript、DOM 和 Ajax 增强 
功能 


前 面 我 们 看 到 过 很 多 DOM 脚 本 编程 的 例 
子 ， 但 那些 为 了 说 明 问题 而 设计 的 例子 之 间 
都 没有 什么 联系 。 本 章 我 们 惑 来 做 一 个 综合 
的 项 目 ， 把 所 有 与 DOM 脚 本 编程 相关 的 技 
术 学 以 至 用。 具体 来 说 ， 我 们 会 从 头 开始 做 
一 个 网 站 ， 然 后 再 用 JavaScript 来 为 这 个 网 站 
增加 交互 功能 。 


p. 12.1 项 目 简 介 


有 一 件 美 差 落 在 了 你 的 头 上 ! 作为 一 名 Web 
设计 师 ， 你 和 补 选 中 为 世界 最 闭 名 的 乐队 Jay 


Skript and the Domsters 设 计 一 个 网 站 。 


噢 ， 没 听 说 过 这 个 乐队 ? 不 要 紧 ， 我 们 一 起 
来 编 个 故事 。 就 当 你 配合 我 把 这 章 写 完 吧 ， 
假装 有 那么 一 个 国际 知名 乐队 ， 而 你 恰好 有 
| RE 
T. 


这 个 网 站 必须 跟 这 个 乐队 一 样 ， 得 酷 。 要 是 
你 能 再 给 网 页 加 上 一 些 交 互 特性 ， 那 就 酷 弓 
了 。 但 是 别 生 了 ， 这 个 网 站 还 必须 对 残疾 用 
户 以 及 搜索 引擎 保持 友好 。 


开办 这 个 网 站 的 主要 目的 束 是 发 布 有 关 乐 队 
的 信息 。 无 论 怎么 构思 这 个 网 站 ， 首 先 都 得 
确保 这 些 信息 能 让 访客 一 目 了 然 。 下 面 我 们 
就 来 看 看 都 要 做 些 什么 。 


12.1.1 原始 资料 


客户 已 经 提交 了 构建 网 站 所 需 的 东西 ， 有 关 
乐队 的 介绍 材料 、 巡 演 日 程 ， 还 有 一 些 照 
请 。 这 个 网 站 不 需要 太 多 的 页 面 ， 它 本 质 上 
就 是 一 个 宣传 手册 ， 而 这 一 点 也 正 是 你 要 把 
握 的 核心 用 户 体验 。 


12.1.2 ”站 点 结构 


根据 客户 提供 的 资料 ， 可 以 画 出 一 张 简 单 的 
站 点 地 图 。 站 扣 的 结构 的 确 不 算 复 傈 ， 人 至 少 











可 以 把 所 有 页 面 都 放 在 一 个 文件 夹 里 。 


为 了 准备 站 点 的 制作 ， 创 建 三 个 文件 来， 一 
个 叫 images ， 保 存 要 用 的 图 片 ， 一 个 叫 
styles ， 保 存 CSS 文 件 ; 一 个 叫 scripts 
， 保 存 JavaScript 文 件 。 


站 点 文件 夹 的 目录 结构 如 下 所 示 : 





e /images 
e /styles 
e /scripts 


说 到 页 面 ， 首 先 得 有 一 个 详细 介绍 乐队 背景 
信息 的 页 面 。 其 次 要 有 一 个 类 似 相 册 的 放 照 
片 的 页 面 。 巡 演 日 程 安排 当然 也 要 单独 一 个 
页 面 。 为 了 让 歌迷 与 乐队 沟通 ， 还 必须 有 一 
个 联系 页 面 。 最 后 ， 当 然 要 有 一 个 主页 ， 放 
上 乐队 简介 和 站 点 导航 信息 。 以 下 是 要 创建 
的 几 个 页 面 〈 如 图 12-1 所 示 ) : 














e Home 
e About 
e Photos 
e Live 
e Contact 
HTML HTML HTML HTML HTML 
=a 
=z 
= 
Home About Photos Live Contact 
图 12-31 
这 几 个 页 面 对 应 如 下 文件 : 


e index.html 
e about.html 


e photos. html 
e live html 
e contact.html 


虽然 每 个 页 面 的 内 容 不 一 样 ， 但 它们 都 要 使 
用 相同 的 基本 结构 。 下 面 该 考虑 为 这 些 页 面 
创建 一 个 模板 了 。 


12.1.3 页面 结构 
站 点 的 每 个 页 面 都 要 分 成 几 个 区 域 。 


e 头 部 区 域 包含 站 点 的 品牌 性 信息 ， 也 是 
放 Logo 的 地 方 。 这 个 区 域 要 使 
用 <header> 元 素 。 

e 导航 区 域 中 包含 一 组 链接 ， 指 向 各 个 页 
面 。 这 个 区 域 使 用 <nav> 元 素 。 

。 内 容 区 域 包含 每 一 页 的 实质 性 内 容 ， 这 
个 区 域 使 用 <article> 元 素 。 


因为 要 使 用 HTML5 元 素 ， 所 以 也 要 在 文档 
的 <head> 元 素 中 包含 Modernizr 库 (第 11 章 
介绍 过 ) 。 可 以 从 http://modernizr.com/ 下 载 
这 个 库 的 最 新 版 本 (撰写 本 章 时 的 最 新 版 本 
为 1.6) ， 并 将 其 放 到 scripts 文件 夹 中 。 


最 后 ， 模 板 的 代码 没有 多 长 。 


























<!DOCTYPE html» 


<html lang="en"> 
<head> 
<meta charset-"utf-8" /> 
<title>Jay Skript and the Domsters</title> 
<script src="scripts/modernizr-1.6.min.js"> 
</head> 
<body> 
<header> 
<nav> 
<ul> 
<li><a href="index. html" >Home</a></1li 


<li><a href="about. html" >About</a></1i 
<li><a hrefz"photos.html"»Photos«/a»« 
<li><a href="live.html">Live</a></li> 
<li><a href="contact.html">Contact</a 
</ul> 
</nav> 
</header> 
<article> 
</article> 
</body> 
</html> 





把 这 些 代 码 保存 在 template.html 文件 


o 


在 设计 好 页 面 结构 后 ， 下 面 就 要 一 页 一 页 地 
插入 内 容 了 。 不 过 ， 让 我 们 先 来 设想 一 下 站 
点 完工 后 的 外 观 。 





g. 12.2 设计 


既然 知道 了 每 个 页 面 中 都 包含 哪些 结构 化 元 
素 ， 而 且 手 里 也 已 经 有 了 客户 提供 的 资料 ， 

那么 接 下 来 的 外 观 设计 就 不 难 做 了 。 你 可 以 
选择 Photoshop、Fireworks 或 任何 其 他 的 图 

形 设 计 工 具 ， 做 出 你 认为 适合 的 任何 风格 的 
设计 方案 (如 图 12-2 所 示 〉 。 用 一 位 著名 局 
师 的 话说 , “以 下 是 我 早 就 为 您 准备 好 的 。” 





Jay Skript 


Y 
and the 
DOMISTERS 








图 12-2 


做 完了 视觉 设计 之 后 ， 可 以 把 平面 设计 切 分 
成 多 个 图 片 。 把 背景 图 片 保存 

为 background.gif 。 而 品牌 图 像 保 存 

为 logo.gif 。 而 融 有 一 点 渐变 的 导航 条 要 
命名 为 navbar.gif 。 最 后 把 人 物 剪 影 保 存 
为 guitarist.gif 。 把 这 些 图 片 都 放 

到 images 文件 夹 中 。 


注意 ”如 果 你 不 是 设计 高 手 ， 还 是 建 
议 你 从 Friend of ED 网 站 





C http://www.friendsofed.com/ ) 的 本 书 
页 面 中 下 载 本 章 用 到 的 图 像 。 





p. 12.3 CSS 


现在 ， 你 有 了 基本 的 HTML 模 板 ， 也 知道 自 
己 的 站 点 长 什么 样 了 。 通 过 为 模板 应 用 
CSS， 可 以 在 Web 上 再 现 你 的 设计 方案 。 


如 果 把 所 有 CSS 都 放 到 一 个 文件 中 ， 可 能 会 
NEREP 2E ERR. MIE ATA CSS oy 
别 放 在 几 个 文件 中 则 是 个 好 主意 。 


怎样 组 织 CSS 由 你 决定 ， 但 我 建议 用 其 中 一 
个 保存 与 整体 布局 有 关 的 样式 ， 用 男 一 个 作 
为 专门 的 颜色 样式 表 ， 而 用 第 三 个 来 保存 与 
版 式 有 关 的 样式 : 


e layout.css 
e color.css 
e typography.css 


oL 以 导入 到 一 个 基本 的 样式 表 





@import url(layout.css); 
@import url(color.css); 
@import url(typography.css); 





把 包含 这 三 行 代码 的 文件 保存 为 basic.css 
， 并 放 在 styles 文件 夹 中 。 如 果 你 想 添 加 
一 个 新 样式 表 或 者 删除 一 个 样式 ， 只 要 编辑 
basic.css 即 可 。 


可 以 在 模板 的 <head> 元 素 中 通过 <link> 元 





素 引 入 这 个 基本 样式 表 。 然 后 ， 再 在 页 
面 <headery> 中 添加 一 个 <img> 标签 ， 指 问 
logo 图 片 。 此 时 也 可 以 同 <article> 中 添加 
一 些 临 时 性 填充 文本 。 





<!DOCTYPE html» 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Jay Skript and the Domsters</title> 
«script src-"scripts/modernizr-1.6.min.js"» 
<link rel="stylesheet" media-"screen" href=" 
</head> 


<body> 
<header> 
<img src="images/logo.gif" alt="Jay Skrip 
<nav> 
<ul> 
<li><a href="index. html" >Home</a></1li 
<li><a href="about. html" >About</a></1i 
<li><a hrefz"photos.html"»Photos«/a»« 
<li><a href="live.html">Live</a></li> 
<li><a href="contact.html">Contact</a 
</ul> 
</nav> 
</header> 
<article> 


<hi>Lorem Ipsum Dolor</h1> 

<p>Lorem ipsum dolor sit amet, consectetu 
Nullam iaculis vestibulum turpis. Pellentesqu 
nibh. Quisque orci, euismod sit amet, sollici 
ullamcorper at, lorem. 
Pellentesque habitant morbi tristique senectu 
et malesuada fames ac turpis egestas. 
Ut lectus. Mauris eu sapien non enim dapibus i 
Sed eu mauris sed pede mollis commodo. 
Fusce eget est. Sed ullamcorper enim nec est. 
Cras dui felis, porta vitae, faucibus laoreet, 
enim. Nulla auctor. Fusce interdum diam ac er 
Mauris egestas. Fusce in elit et sem aliquet 
Donec nunc erat, sodales ac, facilisis a, mol 
Aenean nec justo eu neque malesuada aliquet.« 

«/article» 

«/body» 
«/html» 


Pp | 
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Lorem Ipsum Dolor 


Lorem ipsum doclor sit amet, consectetuer adipiscing elit. Nullam aculis vestibulum turpis. Pellentesque matts ratrum nibh. 
msg tant mocha m: tus ei 











图 12-3 
12.3.1 HE 


样式 表 color .css 是 最 直观 的 。 记 住 ， 不 管 
为 哪个 元 素 应 用 什么 颜色 ， 都 要 同时 给 它 一 
个 背景 色 。 人 和 否则， 就 有 可 能 导致 意外 ， 看 不 
到 某 些 文本 。 





body { 
color: #fb5; 
background-color: #334; 


a:link ( 
color: #445; 
background-color: #eb6; 


a:visited { 
color: #345; 
background-color: #eb6; 


a:hover { 
color: #667; 
background-color: #fb5; 


a:active { 
color: #778; 
background-color: #ec8; 

I 

header ( 
color: #ec8; 
background-color: #334; 
border-color: #667; 

} 

header nav { 
color: #455; 
background-color: #789; 
border-color: #667; 

} 

article { 
color: #223; 
background-color: #edc; 
border-color: #667; 

} 

header nav ul { 
border-color: #99a; 

} 

header nav a:link,header nav a:visited { 
color: #eef; 
background-color: transparent; 
border-color: #99a; 

} 

header nav a:hover { 
color: #445; 
background-color: #eb6; 

} 

header nav a:active { 
color: #667; 
background-color: #ec8; 

} 

article img { 
border-color: #ba9; 
outline-color: #dcb; 

} 

#imagegallery a { 
background-color: transparent; 


} 


Po 


此 时 的 模板 己 经 有 了 色彩 了 ， 如 图 12-4 所 
7 





图 12-4 
12.3.2 布局 


Ls 局 还 是 相当 简单 的 ， 所 有 扩容 都 在 


为 了 让 导航 中 的 链接 水 平 排列 ， 需 要 应 用 一 
些 浮动 效果 。 除 此 之 外 ，layout.css Hix 
有 什么 不 好 理解 的 了 。 


首先 是 为 HTML5 块 元 素 定 义 默 认 的 样式 。 
主要 针对 那些 不 文 持 它 们 的 浏览 器 ， 好 让 这 
些 元 素 都 能 够 具有 适当 的 块 布局 。 


其 次 ， 使 用 通 配 选择 器 把 所 有 元 素 的 内 外 边 
距 设 置 为 零 。 这 样 吏 把 不 同 浏览 器 为 元 素 设 
置 的 不 同 内 外 边 距 全 都 删除 了 。 重 设 这 些 值 
之 后 ， 所 有 样式 就 可 以 一 视 同 仁 了 。 








section, header, article, nav ( 
display: block; 


} 
"x 
padding: 0; 
margin: 60; 
} 
body { 


} 


margin: 1em 107; 

background-image: url(../images/background. 
background-attachment: fixed; 
background-position: top left; 
background-repeat: repeat-x; 

max-width: 80em; 


header ( 


} 


background-image: url(../images/guitarist.gi 
background-repeat: no-repeat; 
background-position: bottom right; 
border-width: .1em; 

border-style: solid; 

border-bottom-width: 0; 


header nav { 


} 


background-image: url(../images/navbar.gif) ; 
background-position: bottom left; 
background-repeat: repeat-x; 

border-width: .1em; 

border-style: solid; 

border-bottom-width: 0; 

border-top-width: 0; 

padding-left: 10%; 


header nav ul { 


} 


width: 100%; 

overflow: hidden; 
border-left-width: .1em; 
border-left-style: solid; 


header nav li ( 


} 


display: inline; 


header nav li a { 


display: block; 

float: left; 

padding: .5em 2em; 
border-right: .1em solid; 


} 

article { 
border-width: .1em; 
border-style: solid; 
border-top-width: 0; 
padding: 2em 10%; 
line-height: 1.8em; 

} 

article img { 
border-width: .1em; 
border-style: solid; 
outline-width: .1em; 
outline-style: solid; 


} 





这 样 ， 我 们 就 通过 CSS 定 义 了 颜色 和 布局 ， 
如 图 12-5 所 示 。 
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Home | About 


Lorem Ipsum Dolor 

Lonan ipur dol sil amet, consectetuer adipiscing eiiL Nullam iaculis 
vesdbulum wpis. PeLenucsque catb rurum cibh, Quisque od ond, euisinod 
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kaare soljcitudin ejns, emirr Nulla auctor, Fasoc interdum diari uc eros. 

Maaris epgcsms, Fusce in elit ct ser aliquet precium. Donec runz crat, sodales ec, 


facilisis a, molestie eu, rassa, Aenean nc justo cu neque malesuada aliquet. 





图 12-5 


12.3.3 ”版 式 


有 时 候 ， 的 确 很 难 分 清茶 些 样式 声明 放 到 哪 
个 文件 里 更 合适 。 字 体 和 大 小 很 显然 应 该 放 


fEtypography.css 里 ， 但 外 边 距 和 内 边 距 
We? 很 难说 它们 到 底 应 该 与 布局 有 关 ， 还 是 
与 版 式 有 关 。 在 我 们 这 个 例子 中 ， 把 内 边 距 
言 恕 都 放 在 了 layout.css 中 定义 (上 一 市 
己 经 定义 了 ) ， 而 外 边 距 信息 则 会 放 

在 typography.css 中 。 











body { 
font-size: 76%; 
font-family: "Helvetica", "Arial",sans-serif; 


I 
body * ( 
font-size: 1em; 
} 
a { 
font-weight: bold; 
text-decoration: none; 
} 
header nav { 
font-family: "Lucida Grande", "Helvetica","A 
} 
header nav a { 
text-decoration: none; 
font-weight: bold; 
} 
article { 
line-height: 1.8em; 
} 
article p { 
margin: lem 0; 
} 
hi { 
font-family: "Georgia","Times New Roman",sa 
font: 2.4em normal; 
} 
h2 { 
font-family: "Georgia","Times New Roman",sa 
font: 1.8em normal; 
margin-top: 1em; 
} 
h3 { 
font-family: "Georgia", "Times New Roman",sa 
font: 1.4em normal; 
margin-top: 1em; 


} 


#imagegallery li { 
list-style-type: none; 
} 
textarea { 
font-family: "Helvetica", "Arial", sans-serif; 


} 








现在 ， 模 板 不 仅 有 了 颜色 、 布 局 ， 还 具有 了 
版 式 ， 如 图 12-6 所 示 。 


ay Skript 
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DOMSTERS 


Lorem Ipsum Dolor 


dob stans! contectetjer adipisong et Nullan iaculis vestibulum tures 
Peliertenque mattis trm nibh Quisque oc oro eusmod eit amat, solietad:n ot, 
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maurs sed D300 nolis commod). F jsc» age! as. S34 ullamcorcer anim nec ast Cras cu 
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faal sis à. ncieste eu massa. Neresn nec jusio eu eque malssunda eliquet 





图 12-6 


以 上 三 个 CSS 文 件 Ccolor.css 

. layout.css 和 typography.css ) 都 和 
basic.css 样式 表 一 块 ， 放 在 styles 文件 
来 中 。 


g. 12.4 标记 


Rese I. PRIUS BARS So eR 
来 该 考虑 站 后 中 的 每 个 页 面 了 。 


首先 从 主页 index.html 开始 ， 这 个 页 面包 
含 一 段 介 绍 性 文字 ， 放 在 <article> 元 素 
h, 











<p id="intro"> 

Welcome to the official website of Jay Skript 
Here, you can «a href="about.html" title="Abo 
view «a href="photos.html" title="Photos">phot 
find out about «a href="live.html" title="Tou 


and «a href="contact.html" title="Contact">get 
«/p» 





这 样 ， 主 页 就 完成 了 ， 如 图 12-7 所 示 。 


ay Skript 
J Ld thee 
DOMSTERS 


Welcome 


Wakara tr he afaa etia ot ay Sirp andthe nsnrs Han, you can learn mera 
about tho band, ^w patos of fhe band Ind out abouttour dates anc got In toueh with the 





这 段 文 字 有 一 个 ia， 叫 "intro"。 我 们 要 利 
用 这 个 id 为 这 段 介 绍 添加 特殊 的 样式 。 此 
还 可 以 利用 这 个 id 来 添加 一 些 DOM 脚 


p. 12.5 JavaScript 


在 编写 DOM 脚 本 之 前 ， 必 须 先 确定 怎么 组 
织 JavaScript 文 件 。 如 果 站 点 需要 很 多 长 长 的 
脚本 ， 那 最 好 把 它 分 割 成 几 个 小 文件 ， 正 如 
本 书 前 面 展 示 的 那样 。 可 是 ， 眼 下 这 个 网 站 
非常 简单 ， 所 需 的 JavaScript 代 人 码 也 不 长 。 为 
了 减少 请 求 的 数量 ， 我 们 就 把 所 有 脚本 都 放 
在 一 个 叫 global.js 的 文件 里 。 这 样 也 有 助 
于 最 后 缩减 其 代码 。 


先 在 scripts 文件 夹 中 创建 global.js。 
然后 在 其 中 添加 几 个 整个 站 点 都 会 用 到 的 函 
数 。 


肯定 要 用 到 addLoadEvent 函数 〈 人 参见 第 6 
章 ) ， 因 为 在 文档 完全 加 载 后 如 果 想 运行 某 
个 函数 ， 就 要 用 到 它 。 





function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 


func(); 





KS, insertAfter 函数 (参见 第 7 章 ) 也 
很 有 用 ， 它 与 insertBefore 方法 正好 对 
应 。 


function insertAfter(newElement,targetElement) 
var parent = targetElement.parentNode; 
if (parent.lastChild == targetElement) { 
parent.appendChild(newElement); 
) else { 


parent.insertBefore(newElement, targetEleme 
j 
} 





最 后 还 需要 一 个 addClass MAM CAS 
3). 


function addClass(element,value) { 
if (lelement.className) { 
element.className - value; 
) else { 
newClassName - element.className; 
newClassName+= " "; 
newClassName+= value; 


element.className - newClassName; 





要 调用 这 个 脚本 ， 应 该 在 模板 页 
面 index.html 结束 的 </body> 标签 之 前 ， 
添加 一 个 <script> 标签 : 


</article> 
«script src="scripts/global.js"></script> 
</body> 


</html> 








这 样 ， 站 点 中 的 每 个 页 面 都 将 包 
@global.js 文件 ， 而 其 中 的 函数 也 可 以 在 


这 些 页 面 里 共 SET, 


实际 上 ， 还 需要 向 global.js 文件 中 添加 一 
个 函数 ， 束 是 下 一 市 我 们 要 写 的 
highlightPage . 


12.5.1 页 面 突出 显示 


每 当 我 们 基于 模板 页 面 创建 一 个 新 页 面 时 ， 
都 要 回 <article> 元 素 中 插入 标记 。 对 你 要 
设计 的 站 点 而 言 ， 这 一 部 分 正 是 每 个 页 面 之 
间 不 同 的 地 方 。 


理想 情况 下 ， 还 应 该 更 新 每 个 页 面 <nav> 元 
素 中 的 链接 。 比 如 ， 如 果 当 前 页 面 
index.html ， 那 么 导航 里 面 就 没有 必要 
添加 指向 当前 index.html 页 面 的 链接 了 。 


但 在 实际 的 网 站 开发 中 ， 不 太 可 能 一 页 一 页 
地 编辑 导航 链接 。 更 癌 见 的 做 法 是 通过 服务 
融 端 包含 技术 ， 把 包含 导航 标记 的 片段 插入 
到 每 个 页 面 中 。 这 里 我 们 就 假设 服务 器 端 会 
包含 下 列 代码 块 : 











<header> 
<img src="images/logo.gif" alt="Jay Skript a 
<nav> 
<ul> 
<li><a href="index.html">Home</a></1i> 
<li><a hrefz"about.html"»About«/a»«/li» 
<li><a hrefz"photos.html"»Photos«/a»«/li 


<li><a href="live.html">Live</a></li> 
<li><a href="contact.html">Contact</a></ 
</ul> 
</nav> 
</header> 





服务 器 端 包含 可 以 使 用 Apache Server Side 
Includes (SSIs) 、PHP、ASP， 或 者 其 他 服 
Sas vid Fi o 


服务 器 端 包含 的 优点 是 可 以 把 重用 标记 块 集 
中 保存 。 这 样 ， 等 到 以 后 要 更 新 页 面 头 部 或 
者 导航 链接 时 ， 只 要 修改 一 个 文件 就 可 以 
了 。 但 集中 保存 的 缺点 ， 如 是 不 能 在 每 个 页 
面 中 目 定义 这 “NER. 


无 论 如 何 ， 至 少 当前 页 面 的 导航 链接 还 是 应 
该 突出 显示 的 。 通 过 突出 显示 ， 访 客 就 能 知 
道 自己 < 现在 在 这 里 ”。 


修改 color.css 文件 ， 添 加 为 here 类 定义 
的 样式 : 





header nav a.here:link, 


header nav a.here:visited, 
header nav a.here:hover, 
header nav a.here:active ( 
color: #eef; 
background-color: #799; 
} 





为 了 应 用 刚刚 定义 的 颜色 样式 ， 为 指向 当前 
页 面 的 导航 链接 添加 here 2S, "n P Bran: 


«a href="index.html" class-"here"»Home«/a»«/li 





如 果 使 用 服务 器 端 包含 的 话 ， 要 做 到 这 一 点 





可 就 不 容易 了。 一 般 来 说 ， 服 务 器 端 技 术 应 
该 为 每 个 页 面 创建 正确 的 标记 。 但 实际 情况 
却 并 非 始终 如 此 。 





JavaScriptix A ES] (ew Be JK. EG T o 


在 这 个 例子 中 ，JavaScript 是 最 后 一 招 了 。 如 
果 能 在 标记 中 直接 添加 here 类 ， 当 然 最 好 
了 。 但 是 ， 如 果 控 制 不 了 标记 ， 就 只 好 求助 
JavaScript 了 。 


首先 ， 删 除 已 经 添加 到 导航 链接 中 的 所 
有 class 属性 。 然 后 ， 编 写 一 
hightlightPage 函数 ， 完 成 下 列 操作 : 


(1) 取得 导航 列表 中 所 有 链接 ; 
(2) FEIE I 3o EE BERR ; 
(3) 如 果 发 现 了 与 当前 UREL 匹 配 的 链接 ， 为 


它 添加 here 类 。 


同 往常 一 样 ， 先 在 函数 中 添加 检查 要 使 用 的 
DOM 方 法 的 代码 。 此 外 ， 还 要 检查 各 种 元 
素 是 否 存 在 。 








function highlightPage() { 
if (!document.getElementsByTagName) return fi 
if (!document.getElementById) return false; 
var headers = document. getElementsByTagName (| 
if (headers.length == 0) return false; 


var navs = headers[0].getElementsByTagName( ' 
if (navs.length == 0) return false; 








取得 导航 链接 ， 然 后 循环 过 有 历 它 们 : 


var links = navs[0].getElementsByTagName("a"); 
var linkurl; 
for (var i20; i«links.length; i++) { 





接 下 来 ， 要 比较 当前 链接 的 URL 与 当前 页 面 
的 URL。 要 取得 链接 的 URL， 可 以 使 

用 getAttribute("href") ， 而 要 取得 当 
前 页 面 的 URL， 则 可 以 使 


用 window.location.href。 


linkurl = links[i].getAttribute("href"); 





Javascript 为 比较 字符 串 提 供 了 很 多 方法 。 其 
H, indexOf 方法 用 于 在 字符 串 中 寻找 子 字 
符 串 的 位 置 


string.indexOf (substring) 





x^ TSI Inl T FITE BAR EL E o 
RITE X E AER PTB 2 D HBCGL TT 
在 力 一 个 字符 串 里 面 ， 是 否 是 当前 URL 里 的 
链接 URL。 


currenturl.indexOf(linkurl) 





如 果 没 有 [匹配 到 ，index0f 方法 将 返回 -1。 
如 果 返 回 其 他 值 ， 则 表示 有 匹配 。 如 果 
indexOf 方法 不 返回 -1， 那 么 就 可 以 前 进 到 
函数 的 最 后 一 步 了 : 


if (window.location.href.indexOf(linkurl) != - 








此 时 的 链接 一 定 是 指 同 当前 页 面 的 链接 ， 
此 就 给 它 添加 here 2: 


links[i].className = "here"; 





剩 下 的 代码 就 是 关闭 计 语句 、 关 闭 for 循 
环 和 关闭 function 定义 的 花 括 号 了 。 最 
后 ， 使 用 addLoadEvent 函数 调 
HihighlightPage 。 


function highlightPage() { 
if (!document.getElementsByTagName) return fi 
if (!document.getElementById) return false; 
var headers = document. getElementsByTagName (| 
if (headers.length == 0) return false; 
var navs = headers[0].getElementsByTagName( ' 
if (navs.length == 0) return false; 
var links = navs[0].getElementsByTagName( "a" 
for (var i=@; i«links.length; i++) { 
var linkurl; 


for (var i=0; i«links.length; i++) { 
linkurl = links[i].getAttribute("href"); 
if (window.location.href.indexOf(linkurl) 
links[i].className = "here"; 


} 


} 
addLoadEvent (highlightPage) ; 





保存 包含 这 个 函数 的 global.js 文件 。 刷 新 
index.html 之 后 ， 你 就 会 看 到 Home 链 接 突 
出 显示 了 ， 如 图 12-8 所 示 。 
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图 12-8 
利用 highlightPage 函数 ， 还 可 以 达到 一 
far OUAREHSY H BRI e 


通过 给 每 个 页 面 的 body 元 素 添 加 id 属性 ， 
可 以 为 每 个 页 面 应 用 不 同 的 样式 。 为 了 给 每 
个 页 面 添 加 独特 的 id 属性 ， 可 以 取得 并 使 
用 当前 链接 〈 即 添加 here 类 的 链接 ) 中 的 
文本 。 但 需要 使 用 JavaScript 的 
toLowerCase 方法 把 该 文本 转换 成 小 写 形 


A 


var linktext = links[i].lastChild.nodeValue.ta 








这 样 就 取得 了 当前 链接 最 后 一 个 子 元素 的 
值 ， 也 就 是 链接 的 文本 ， 然 后 把 它 转 换 成 小 
写 形式 。 如 果 链 接 中 的 文本 是 “Home”， 那 
么 linktext 变量 中 保存 的 值 就 是 "home" . 
通过 下 面 的 语句 就 可 以 把 这 个 变量 的 值 设置 
为 body 元 素 的 id 属性 了 : 


document. body.setAttribute("id", linktext) ; 


Le 


RRR TH AH 当 于 在 <body> 标签 中 添加 了 


id="home" . 
现在 的 highlightPage 函数 如 下 所 示 : 


function highlightPage( href ) { 
if (!document.getElementsByTagName) return fi 
if (!document.getElementById) return false; 
var headers = document. getElementsByTagName ( 
if (headers.length == @) return false; 
var navs = headers[0].getElementsByTagName( ' 
if (navs.length == 0) return false; 
var links = navs[0].getElementsByTagName( "a" 
var linkurl; 
for (var i20; i«links.length; i++) { 
linkurl = links[i].getAttribute("href"); 
if (window.location.href.indexOf(linkurl) 
links[i].className = "here"; 
var linktext - links[i].lastChild.nodeVa 
document.body.setAttribute("id",linktext 
} 
} 


} 
addLoadEvent (highlightPage) ; 





Fee, index.html 文件 的 body 元 素 束 会 有 
一 个 值 为 "home" 的 id about.html 文件 
中 的 id 就 是 "about" , photos.html 文件 
中 的 id 将 是 "photos" ， 依 次 类 推 。 


新 加 入 的 这 些 标识 符 都 可 以 成 为 CSS 中 的 挂 
钩 。 例 如 ， 可 以 利用 这 些 id 为 不 同 页 面 的 
头 部 应 用 不 同 的 背景 图 像 。 


接 下 来 为 每 个 页 面 制作 一 幅 图 像 ， 大 小 为 
250x250px。 也 可 以 使 用 我 已 经 做 好 





Hj: lineup.gif . basshead. gif 
. bassist. gif flidrummer.gif ， 把 它们 
都 放 到 images 文件 夹 中 。 


然后 就 可 以 更 新 layout.css 文件 ， 添 
加 background-image 声明 : 


#about header { 
background-image: url(../images/lineup.gif); 


#photos header { 
background-image: url(../images/basshead. gif 


#live header { 

background-image: url(../images/bassist.gif) 
} 
#contact header { 

background-image: url(../images/drummer. gif) 


} 








如 此 一 来 ， 每 个 页 面 的 头 部 就 会 应 用 不 同 的 
育 景 图 像 了 。 


12.5.2. JavaScriptZ]^] Fr 


主页 还 需要 美化 一 下 。 上 毕竟 ， 大 多 数 访客 都 
要 先 访问 主页 ， 在 其 中 添加 一 些 炫 酷 功能 是 
非常 有 必要 的 。 第 10 章 讨论 的 JavaScript 约 灯 
片 用 在 这 里 正 合 适 。 


在 "intro" 那 一 段 文 字 中 ， 有 指 癌 站 点 其 他 
页 面 的 所 有 和 链接。 如 果 在 访客 把 鼠标 放 到 相 
应 链接 上 的 时 候 ， 能 够 让 他 们 得 到 有 关 页 面 
的 一 点 信息 应 该 不 错 。 在 这 里 ， 可 以 显示 相 
应 页 面 尖 部 图 像 的 缩小 版 。 


把 每 一 幅 图 像 缩 小 为 150x150px， 然 后 合并 


为 750px 长 的 一 张 图 ， 命 名 
为 slideshow.gif 。 把 这 张 图 放 在 jmages 
AXES HF 


组 合 后 的 图 像 如 图 12-9 所 示 。 








为 了 实现 幻灯 片 功能 ， 和 需要 更 新 global .js 
文件 。 先 把 第 10 章 中 定义 的 moveElement 
函数 复制 过 来 : 





function moveElement(elementID, final_x, final - 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) re 
var elem = document.getElementById(elementI 
if (elem.movement) { 
clearTimeout (elem.movement) ; 


if (lelem.style.left) ( 
elem.style.left = "0px"; 

} 

if (lelem.style.top) ( 
elem.style.top = "Opx"; 

} 

var xpos = parseInt(elem.style.left); 

var ypos = parseInt(elem.style.top); 

if (xpos == final_x && ypos == final_y) { 
return true; 

} 

if (xpos « final x) ( 
var dist = Math.ceil((final x - xpos)/10); 
xpos = xpos + dist; 

I 

if (xpos » final x) ( 
var dist - Math.ceil((xpos - final x)/10); 
xpos - xpos - dist; 

} 

if (ypos < final_y) { 


var dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 


if (ypos » final y) ( 
var dist - Math.ceil((ypos - final y)/10); 
ypos - ypos - dist; 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
var repeat = "moveElement('"+elementID+"'," 
elem.movement = setTimeout (repeat, interval) ; 





现在 应 该 创建 幻灯 片 元 素 并 准备 相应 链接 
了 。 在 此 ， 我 们 把 幻灯 片 直 接 放 在 文档 中 
的 "intro" 段落 后 面 。 





function prepareSlideshow() { 

if (!document.getElementsByTagName) return fi 
if (!document.getElementById) return false; 
if (!document.getElementById("intro")) retu 
var intro = document. getElementById("intro" ) 
var slideshow = document.createElement("div" 
slideshow.setAttribute("id"," slideshow"); 
var preview - document.createElement("img"); 


preview.setAttribute("src","images/slidesho 
preview.setAttribute("alt","a glimpse of wha 
preview.setAttribute("id","preview"); 
slideshow.appendChild(preview); 
insertAfter(slideshow,intro); 





接着 循环 遍历 "intro" 段落 中 的 所 有 链接 ， 
并 根据 当前 鼠标 所 在 的 链接 来 移动 preview 
元 素 。 比 如 说 ， 如 果 链 接 的 href 值 中 包含 
字符 串 "about .htm1" ， 就 把 preview 元 素 
移动 到 -150px 的 位 置 上 ; 如 果 链 接 的 href 
值 中 包含 字符 串 "photos .html" ， 就 把 


preview 元 素 移 动 到 -300px 的 位 置 上 ， 依 次 
类 推 。 


为 了 让 动画 效果 看 起 来 很 帅 ， 给 
moveElement PK ZI FAX ASP W 
interval fH: 


var links - intro.getElementsByTagName("a"); 
var destination; 
for (var i20; i«links.length; i++) { 
links[i].onmouseover = function() ( 
destination - this.getAttribute("href"); 
if (destination.indexOf("index.html") ! 
moveElement("preview",0,0,5); 


} 
if (destination.indexOf("about.html") ! 


moveElement("preview",-150,0,5); 


j 
if (destination.indexOf("photos.html") ! 


moveElement("preview",-300,0,5); 

} 

if (destination.indexOf("live.html") != 
moveElement("preview",-450,0,5); 

} 

if (destination. indexOf("contact.htm1") 
moveElement("preview",-600,0,5); 





还 要 通过 addLoadEvent 调用 这 个 函数 : 


addLoadEvent (prepareSlideshow); 





保存 global.js 文件 。 


当然 ， 还 得 更 新 样式 ， 在 layout .css 中 添 
加 如 下 声明 : 


#slideshow { 
width: 150px; 
height: 150px; 
position: relative; 
overflow: hidden; 


} 


#preview { 


position: absolute; 
border-width: 0; 
outline-width: 0; 

} 





在 浏览 器 中 刷新 jndex.html ， 试 一 试 幻 灯 
片 的 效果 。 


看 起 来 还 不 错 。 要 是 把 动画 效果 放 到 一 个 小 
窗口 里 ， 惑 更 完美 了 。 


创建 一 幅 150x150px 的 图 像 ， 它 的 绝 大 部 分 
都 透明 ， 只 有 四 个 圆 角 是 与 内 容 div 颜色 相 
同 的 。 把 它 命名 为 frame.gif 并 保存 

在 images 文件 夹 中 。 


把 下 列 代码 添加 到 global.js 中 的 
prepareSlideshow 函数 中 ， 放 到 创建 
slideshow 元 素 的 代码 后 面 : 


var frame = document.createElement("img"); 
frame.setAttribute("src","images/frame.gif"); 
frame.setAttribute("alt",""); 
frame.setAttribute("id","frame"); 


slideshow.appendChild(frame); 





为 保证 这 个 小 窗口 出 现在 动画 之 上 ， 还 要 
在 layout.css 中 加 入 如 下 代码 : 


#frame { 
position: absolute; 
top: 0; 
left: 0; 


z-index: 99; 


} 





刷新 index.html ， 再 试 试 幻灯 片 效 果 ， 现 
在 图 像 应 该 会 出 现在 小 窗口 里 面 了 。 


目前 ， 访 客 的 鼠标 放 到 "intro"” 段落 中 的 链 
接 上 时 会 触发 约 灯 请 动画 。 如 果 想 让 导 
Widiv 中 的 链接 也 能 触发 约 灯 户 ， 可 以 把 下 
面 这 行 代 码 : 


var links = intro.getElementsByTagName("a"); 





BOA: 


var links = document.getElementsByTagName( "a" 





完成 后 的 prepareSlideshow 函数 如 下 所 
ZN: 





function prepareSlideshow() { 
if (!document.getElementsByTagName) return 
if (!document.getElementById) return false; 
if (!document.getElementById("intro")) retu 
var intro = document.getElementById("intro") 


var slideshow = document.createElement("div' 
slideshow.setAttribute("id"," slideshow"); 
var frame - document.createElement("img"); 
frame.setAttribute("src","images/frame.gif") 
frame.setAttribute("alt",""); 
frame.setAttribute("id"," frame"); 
slideshow.appendChild(frame); 

var preview - document.createElement("img"); 


preview.setAttribute("src","images/slidesho 
preview.setAttribute("alt","a glimpse of wh 
preview.setAttribute("id","preview"); 
slideshow.appendChild(preview); 
insertAfter(slideshow,intro); 
var links - document.getElementsByTagName(" 
var destination; 
for (var i20; i«links.length; i++) { 
links[i].onmouseover = function() ( 
destination - this.getAttribute("href"); 
if (destination.indexOf("index.html") ! 
moveElement("preview",0,0,5); 
} 
if (destination.indexOf("about.html") ! 
moveElement( "preview", -150,0,5); 
j 
if (destination.indexOf("photos.html") ! 
moveElement( "preview", -300,0,5); 
j 
if (destination.indexOf("live.html1") != 
moveElement( "preview", -450,0,5); 


if (destination.indexOf("contact.html") 
moveElement("preview",-600,0,5); 


addLoadEvent(prepareSlideshow); 





这 样 ， 把 鼠标 放 在 导航 链接 上 ， 也 将 会 触发 
幻灯 片 ， 如 图 12-10 所 示 。 
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图 12-10 


12.5.3 psp ey 


站 点 中 的 下 一 页 是 About 页 面 。 
在 about .html 的 <article> 元 素 中 添加 如 


下 标记 ， 





<h1>About the band</h1> 


<nav> 
<ul> 
<li><a href="#jay">Jay Skript«/a»«/li» 
<li><a href="#domsters">The Domsters</a>< 
</ul> 
</nav> 
<section id="jay"> 
<h2>Jay Skript</h2> 
<p>Jay Skript is going to rock your world! 
<p>Together with his compatriots the Doms 
Jay is set for world domination. Just you w 
<p>Jay Skript has been on the scene since 
His talent hasn't always been recognized or 
In the early days, he was often unfavorably 
similarly named artists. That's all in the 
</section> 
<section id="domsters"> 
<h2>The Domsters</h2> 
<p>The Domsters have been around, in one 


for almost as long. It's only in the past f 

have settled down to their current, stable 

Now they're a rock-solid bunch: methodical 
</section> 





然后 ，About 页 面 如 图 12-11 所 示 。 
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图 12-11 


似乎 还 可 以 ， 但 就 是 页 面 有 点 长 了 。 知 道 为 
ATA «nav» 元 系 中 包含 内 部 链接 吗 ? 就 是 为 
了 解决 这 个 问题 。 单 击 <nav> 中 的 每 个 链 
接 ， 都 会 跳 到 带 有 相应 id 属性 的 


«section». 


而 使 用 JavaScript 和 DOM， 还 可 以 选择 性 地 
每 次 只 显示 其 中 一 个 部 分 Csection) 。 把 下 
面 这 个 函数 添加 到 global.js 中 ， 它 能 够 根 
据 指定 的 id 显示 相应 的 <section> ， 同 时 
隐藏 其 他 部 分 : 





function showSection(id) { 
var sections = document.getElementsByTagName 
for (var i=@; i«sections.length; i++ ) { 
if (sections[i].getAttribute("id") != id) 
sections[i].style.display = "none"; 
} else { 


sections[i].style.display = "block"; 





这 个 showSection 函数 的 用 途 是 修改 每 个 
部 分 的 display 样式 属性 。 除 了 与 作为 参数 
传 入 的 id 对 应 的 部 分 ， 其 他 部 分 的 display 
属性 都 将 被 设置 为 "none" ， 而 与 传 入 id 对 
应 的 那个 部 分 的 display 属性 则 被 设置 
Jj"block". 


然后 ， 还 需要 在 <article> 中 的 <nav> 所 包 
含 的 链接 被 单 击 时 调用 showSsection rf 


创建 一 个 名 为 prepareInternalnav 的 函 
数 ， 先 从 循环 遍历 <article> 中 的 <nav> 所 
包含 的 链接 开始 : 


function prepareInternalnav() { 
if (!document.getElementsByTagName) return ff 
if (!document.getElementById) return false; 
var articles = document.getElementsByTagName 
if (articles.length == 0) return false; 
var navs = articles[0].getElementsByTagName( 


if (navs.length == 0) return false; 

var nav = navs[@]; 

var links = nav.getElementsByTagName("a"); 
for (var i=0; i«links.length; i++ ) { 





每 个 链接 的 href 属性 中 都 包含 对 应 部 分 的 
id ， 开 头 的 “ 拓 表 示 内 部 链接 。 要 提取 每 一 
部 分 的 id 值 ， 可 以 使 用 split 方法 。 这 是 
根据 分 隅 符 把 一 个 字符 串 分 成 两 或 多 部 分 的 
一 种 便捷 方式 : 


array = string.split(character) 





x, RAVER ee eB, D 
EER] ULL? T War. FEU BZA BL 
PAS Tua: 第 一 个 元 素 是 “#" 前 面 的 所 有 字 
TP ELETTR) ， 第 二 个 元 素 则 是 后 
面 的 所 有 字符 。 还 记得 吧 ， 数 组 中 第 一 个 元 
素 的 索引 是 0， 而 我 们 想 要 的 是 数组 中 的 第 
二 个 元 素 ， 它 的 索引 是 1。 








var sectionId = links[i].getAttribute("href"). 


这 样 就 可 以 把 “#' 后 面 的 字符 串 提 取出 来 并 


保存 到 sectionId 变量 中 。 





再 添加 一 个 简单 的 测试 ， 确 保 真 的 存在 带 有 
相应 id 的 元 素 。 如 果 不 存在 ， 则 继续 下 一 
次 循环 。 


if (!document.getElementById(sectionId)) conti 





在 页 面 加 载 后， 需要 默认 隐藏 所 有 部 分 。 下 
面 这 行 代码 可 以 解决 问题 : 





document. getElementById(sectionId).style.disp 





接 下 来 可 以 给 链接 添加 onclick 事件 处 理 函 
数 ， 以 便 链 接 被 单 击 后 ， 把 sectionId 传 给 
showSection 函数 。 但 这 里 存在 作用 域 问 
题 。 因 为 变量 sectionId 是 一 个 局 部 变量 ， 
它 只 有 在 prepareInternalnav KATH 
间 存 在 ， 等 到 了 事件 处 理 函 数 执行 的 时 候 它 
就 不 存在 了 。 


要 解决 这 个 问题 ， 可 以 为 每 个 链接 创建 一 个 
目 定义 的 属性 。 比如 把 这 个 属 性 命名 

为 destination ， 然 后 把 sectionId 的 值 
赋 给 它 : 


links[i].destination = sectionId; 





这 个 属性 的 作用 域 是 持久 存在 的 。 回 头 ， 我 
们 可 以 在 事件 处 理 函 数 中 再 查询 这 个 属性 : 





links[i].onclick = function() { 
showSection(this.destination) ; 
return false; 


} 





prepare es ene ee ia 
5> 结束 它 的 定义 。 再 通过 addLoadEvent 
函数 调 用 它 : 


addLoadEvent (prepareInternalnav) ; 


Pp 


以 下 是 global.js 中 的 
prepareInternalnav AŽ: 


function prepareInternalnav() { 
if (!document.getElementsByTagName) return 
if (!document.getElementById) return false; 
var articles = document.getElementsByTagName 
if (articles.length == 0) return false; 
var navs = articles[0].getElementsByTagName( 
if (navs.length == 0) return false; 
var nav = navs[@]; 
var links = nav.getElementsByTagName("a"); 
for (var i=@; i«links.length; i++ ) { 
var sectionId = links[i].getAttribute("hre 
if (!document.getElementById(sectionId)) q 


document. getElementById(sectionId).style.d 
links[i].destination = sectionId; 
links[i].onclick = function() { 
showSection(this.destination); 
return false; 


addLoadEvent(prepareInternalnav); 





在 浏览 器 中 打开 about .htm1l ， 测 试 一 下 刚 
才 实 现 的 功能 。 单 击 一 个 内 部 链接 ， 应 该 只 
会 显示 相关 的 部 分 。 图 12-12 只 是 显示 了 一 

个 部 分 的 About 页面 。 
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图 12-12 


页 面 越 长 ， 这 个 功能 的 效果 就 越 明 显 。 例 
如 ， 要 是 有 一 个 种 见 问 题 页 面 ， 那 么 每 个 问 
题 都 可 以 作为 内 部 链接 来 处 理 。 而 单 击 一 个 
问题 ， 就 会 显示 出 与 该 问题 对 应 的 答案 ， 与 
此 同时 其 他 问题 的 答案 并 不 显示 。 


12.5.4 JavaScript K|} E 


接 下 来 我 们 来 制作 photos .html ， 这 个 页 
面 是 使 用 JavaScript 构 建 图 片 库 的 理想 之 所 。 


客户 提供 了 Jay Skript 和 Domsters 演 出 的 四 张 
照片 ， 大 小 为 400x300px: 


e concert.jpg 

e bassist.jpg 

e guitarist. jpg 
e crowd. jpg 


在 images 文件 夹 里 创建 一 个 名 为 photos 的 
文件 夹 ， 把 这 四 张 照片 放 到 里 面 。 再 为 每 张 
照片 分 别 创建 100x100px 的 缩 略 网 : 


thumbnail_concert. jpg 
thumbnail_bassist. jpg 
thumbnail guitarist. jpg 
thumbnail_crowd. jpg 


把 这 些 照片 也 放 在 photos 文件 夹 中 。 


创建 一 组 链接 ， 指 向 全 尺寸 照片 。 为 这 个 列 
表 指 定 id 为 "imagegalery" 。 在 每 个 链接 
中 添加 一 个 <img> 标签 ， 各 个 标签 的 src 属 
性 分 别 指向 不 同 的 缩 略 图 。 


<h1>Photos of the band</h1> 
<ul id="imagegallery"> 
<li> 
<a href="images/photos/concert.jpg" title 
<img src="images/photos/thumbnail_conce 
</a> 
</li> 
<li> 
<a href="images/photos/bassist.jpg" title 
<img src="images/photos/thumbnail_bassi 
</a> 
</li> 
<li> 


<a href="images/photos/guitarist.jpg" tit 
«img src-"images/photos/thumbnail guita 
«/a» 
</li> 
<li> 


<a href="images/photos/crowd. jpg" title=" 
«img src-"images/photos/thumbnail crowd 
«/a» 
</li> 
</ul> 





把 这 组 链接 放 到 photos . html 的 
<article> 元 素 中 。 


更 新 1ayout .css XF, ibHgWa lr M E A 


排列 变 成 水 平 排列 〈 如 图 12-13 所 示 ) 。 


#imagegallery li { 
display: inline; 


Jay Skript 
and the 
DOMSTERS 


Photos of the band 


a= 





图 12-13 


为 了 让 图 片 库 的 脚本 正常 运行 ， 还 需要 再 制 
作 一 个 占 位 符 图 片 。 把 这 个 图 片 命名 

为 placeholder .gif 并 放 到 images 文件 夹 
中 。 


接 下 来 就 可 以 把 第 6 音 和 第 7 章 编写 的 图 片 库 
文件 夹 的 global.js X 














function showPic(whichpic) { 
if (!document.getElementById("placeholder") ) 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById(" 
placeholder.setAttribute("src",source) ; 
if (!document.getElementById("description") ) 
if (whichpic.getAttribute("title")) { 


} 


var text = whichpic.getAttribute("title"); 
} else { 
var text = ""; 
} 
var description = document.getElementById(" 
if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 


} 


return false; 


function preparePlaceholder() { 


} 


if (!document.createElement) return false; 
if (!document.createTextNode) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery" ) 
var placeholder = document.createElement ("i 
placeholder. setAttribute("id", "placeholder" ) 
placeholder.setAttribute("src","images/plac 
placeholder.setAttribute("alt","my image ga 
var description = document.createElement("p" 
description.setAttribute("id","description") 
var desctext - document.createTextNode("Cho 
description.appendChild(desctext); 

var gallery - document.getElementById("imag 
insertAfter(description,gallery); 
insertAfter(placeholder,description); 


function prepareGallery() { 


if (!document.getElementsByTagName) return 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery" ) 
var gallery = document. getElementById( "imag 
var links = gallery.getElementsByTagName( "a" 
for ( var i=@; i < links.length; i++) { 
links[i].onclick = function() { 
return showPic(this); 


addLoadEvent (preparePlaceholder) ; 
addLoadEvent(prepareGallery) ; 





只 有 一 处 微小 的 变化 : description 中 的 
文本 被 放 到 了 placeholder 图 像 的 上 方 。 


在 浏览 器 中 打开 photos .htm1l ， 试 验 一 下 
效果 (如 图 12-14 所 示 )。 
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图 12-14 


12.5.5 “增强 表格 


客户 给 我 们 提供 了 Jay Skript 和 Domsters 的 巡 
演 日 程 。 每 场 演出 ， 都 有 一 个 日 期 
(date)、 一 个 城市 (city〉 和 一 个 地 点 
(venue) 。 显 然 ， 这 是 表 列 数据 。 因 此 ， 
Live 页 面 应 该 包含 一 个 巡演 表格 。 





<hi>Tour dates«/h1» 
<table summary="when and where you can see th 
<thead> 
<tr> 
<th>Date</th> 
«th»City«/th» 


<th>Venue</th> 

</tr> 

</thead> 

<tbody> 

<tr> 
<td>June 9th</td> 
«td»Portland, «abbr title="Oregon">OR</ab 
«td»Crystal Ballroom«/td» 

</tr> 

<tr> 
«td»June 10th«/td» 
«td»Seattle, «abbr title-"Washington"»WA« 
«td»Crocodile Cafe«/td» 

</tr> 

<tr> 
<td>June 12th</td> 
<td>Sacramento, «abbr title-"California"» 
«td»Torch Club«/td» 

</tr> 

<tr> 
<td>June 17th</td> 
<td>Austin, <abbr title="Texas">TX</abbr> 
<td>Speakeasy</td> 

</tr> 

</tbody> 

</table> 





把 这 个 <table> 放 到 1ive.html 中 的 
«article» WAW- 


接着 再 在 layout.css 中 为 表格 中 的 单元 格 
应 用 一 些 样式 : 


td { 
padding: .5em 3em; 
} 





更 新 color .css , Axe kA Zetia E KN 


th { 
color: #edc; 
background-color: #455; 


} 
tr td { 


color: #223; 
background-color: #eb6; 





EN Was PFT Frlive.html 后 ， 可 以 看 到 一 
个 普 普 通通 、 丝 坚 没 有 应 用 什么 脚本 的 表格 
(如 图 12-15 所 示 ) 。 
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图 12-15 


此 时 ， 正 好 可 以 把 第 9 章 定 义 的 表格 样式 化 
的 函数 stripeTables 及 highlightRows 
拿 过 来 使 用 。 还 可 以 把 第 8 章 的 
displayAbbreviations 函数 借用 过 来 。 


把 这 ee js 文件 
中 ， 并 通过 addLoadEvent 调用 它们 : 





function stripeTables() ( 

if (!document.getElementsByTagName) return 
var tables = document. getElementsByTagName( 
for (var i20; i«tables.length; i++) { 

var odd = false; 

var rows = tables[i].getElementsByTagName ( 

for (var j=0; j<rows.length; j++) { 

if (odd == true) ( 
addClass(rows[j],"odd") ; 


odd = false; 
} else { 

odd = true; 
} 


function highlightRows() { 
if(!document.getElementsByTagName) return f 
var rows = document.getElementsByTagName( "t 
for (var i20; i«rows.length; i++) { 
rows[i].oldClassName = rows[i].className 
rows[i].onmouseover = function() ( 
addClass(this,"highlight"); 
I 
rows[i].onmouseout = function() { 
this.className - this.oldClassName 


} 
} 
} 
function displayAbbreviations() { 
if (!document.getElementsByTagName || !docu 
w || !document.createTextNode) return false; 


var abbreviations - document.getElementsByT 

if (abbreviations.length « 1) return false; 

var defs - new Array(); 

for (var i20; i«abbreviations.length; i++) 
var current abbr = abbreviations[i]; 
if (current abbr.childNodes.length « 1) c 
var definition - current abbr.getAttribut 
var key = current abbr.lastChild.nodeValu 
defs[key] = definition; 

} 

var dlist = document.createElement("dl"); 

for (key in defs) { 


var definition = defs[key]; 

var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode( 
dtitle.appendChild(dtitle text); 

var ddesc = document.createElement("dd"); 
var ddesc text = document. createTextNode( 
ddesc.appendChild(ddesc_text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 

if (dlist.childNodes.length < 1) return fal 
var header = document.createElement("h3"); 
var header_text = document.createTextNode(" 
header.appendChild(header text); 

var articles - document.getElementsByTagNam 
if (articles.length -- 0) return false; 

var container = articles[0]; 

container. appendChild(header) ; 
container.appendChild(dlist) ; 


} 


addLoadEvent(stripeTables); 
addLoadEvent(highlightRows); 
addLoadEvent(displayAbbreviations); 





fet, highlightRows 和 
displayAbbreviations 函数 都 稍 有 改 
动 。 


e highlightRows : 没有 像 以 前 那样 直 
接应 用 样式 属性 ， 而 是 使 用 addClass 
函数 添加 了 highlight 类 。 这 个 类 会 在 用 
FP! Be tT EB NH. TE 
应 用 新 类 名 之 前 ， 先 把 原来 的 
className 保存 到 名 为 oldClassName 
的 自 定义 属性 中 。 当 用 户 的 鼠标 离开 表 
格 行 之 后 ， 再 把 className 属性 重 置 回 
原来 的 oldClassName 值 。 

e displayAbbreviations : 修改 了 最 
后 几 行 代码 ， 因 为 这 里 要 找 的 











是 article 元 素 ， 而 不 是 第 8 章 id 
为 content 的 div 元 素 。 


这 两 处 修改 也 提醒 我 们 ， 以 前 定义 的 函数 仍 
然 需要 进一步 抽象 。 比 如 说 ， 可 以 

为 displayAbbreviations 函数 再 增加 一 
个 参数 ， 以 便 指 明 把 新 创建 的 列表 添加 到 哪 
个 元 素 中 。 


还 要 更 新 layout.css ， 再 添加 一 些 样式 : 


dl { 

overflow: hidden; 
} 
dt { 

float: left; 


dd { 
float: left; 
} 





再 更 新 typography .css : 


dt { 

margin-right: 1em; 
} 
dd { 

margin-right: 3em; 





ia, fEcolor.css 中 为 odd 和 highlight 
类 添加 颜色 样式 : 





tr.odd td { 
color: #223; 
background-color: #ec8; 


} 

tr. highlight td { 
color: #223; 
background-color: #cba; 


} 





在 浏览 器 中 打开 live.html ， 看 一 看 增强 之 
后 的 <table> 吧 。 此 时 ， 偶 数 行 都 会 有 一 
Modd 类 (如 图 12-16 所 示 )。 
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图 12-16 


12.5.6 ”增强 表单 


还 得 为 这 个 站 后 制作 一 个 很 重要 的 页 面 ， 这 
个 页 面 能 够 让 乐队 的 粉丝 们 跟 乐 手 沟通 。 

想 一 想 ， 差 不 多 任何 网 站 都 会 公布 一 些 联系 
信息 ， 哪 怕 只 是 一 个 电子 邮件 地 址 。 对 眼下 
这 个 网 站 来 说 ， 你 打算 构建 一 个 联系 表单 。 


联系 表单 ， 和 其 他 任何 类 型 的 表单 一 样 ， 都 











需要 某 种 服务 器 端 技 术 来 进一步 验证 并 把 数 
据 保 存 到 后 台数 据 库 或 系统 中 。Perl、 

PHP、ASP 以 及 其 他 服务 器 端 编 程 语言 都 是 
可 选 的 技术 。 但 我 们 这 个 例子 不 会 涉及 服务 
器 端 脚本 ， 而 是 会 创建 一 个 极为 普通 的 
HTML 页 面 ， 向 访客 显示 感谢 信息 。 访 客 填 
充 的 信息 也 不 会 发 送 到 哪 去 〈 别 忘 了 ， 乐 队 
是 我 们 虚构 的 ) 。 假 如 真有 这 么 一 个 网 站 ， 
就 必须 得 有 服务 器 端 脚 本 来 处 理 用 户 提交 的 
数据 ， 把 它们 保存 到 数据 库 中 ， 或 者 通过 邮 
件 转发 给 适当 的 人 ， 然 后 才 显 示 感 谢 信 息 。 


创建 一 个 文件 ， 命 名 为 contact .htm1 4 
然 这 个 文件 要 基于 template.html 来 创 
建 ， 只 不 过 <article> 中 要 包含 一 个 
«form» : 





<h1>Contact the band«/hi1» 
«form method="post" action-z"submit.html"» 
<fieldset> 
<p> 
«label for="name">Name:</label> 
<input type="text" id="name" name="name" 
placeholder="Your name" required="required" 
</p> 
<p> 
«label for="email">Email:</label> 
«input type-"email" id-"email" name="emai 
placeholder="Your email address" required=" 
«/p» 
<p> 
«label for="message">Message:</label> 
«textarea cols="45" rows="7" id-"message" 
name-"message" required-"required" 
placeholder-"Write your message here."»«/te 
«/p» 
«input type-"submit" value-"Send" /» 
</fieldset> 
</form> 





更 新 layout .css 文件 : 


label ( 

display: block; 
} 
fieldset { 


border: 0; 


} 





这 样 ， 就 有 一 个 基本 的 联系 表单 ， 如 图 12- 
17 所 示 。 
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图 12-17 


接 下 来 ， 再 基于 template.html 创建 一 个 
新 文件 ， 命 名 为 submit.html 。 这 一 
IX, «article» 中 包含 了 感谢 信息 。 


<h1>Thanks!</h1> 
<p>Thanks for contacting us. We'll get back to 





i submit. html 页 面 中 只 包含 感谢 信 
电 ， 不 处 理 表 单 提 区 的 信息 ， 你 懂 的 〈“ 如 图 
12-18 所 示 ) à- 


Done 


图 


a. 
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Home = = About Photos 


Thanks! 


Thanks for contacting us. We'll get back to you as soon as we can. 





12-18 
字段 标签 


表单 中 有 三 个 字段 : name. email 和 
message 。 每 个 字段 都 有 一 个 对 应 的 
<label> 标签 。 


作为 增进 可 访问 性 的 元 素 ，label JE% 
有 用 。 它 通过 for 属性 把 一 小 段 文本 天 
联 到 表单 的 一 个 字段 。 对 于 屏幕 阅读 需 
来 说 ， 标 签 中 的 这 一 小 段 文本 几乎 是 不 
可 或 缺 的 。 


即使 是 那些 视力 没有 任何 问题 的 

A; label 元 素 同 样 也 具有 不 可 低估 的 
价值 。 很 多 浏览 器 都 会 为 label 元 素 添 
加 默认 行为 :如果 1abel 中 的 文本 被 单 
击 ， 关 联 的 表单 字段 就 会 获得 焦点 。 这 
对 于 增进 表单 的 可 用 性 是 很 有 帮助 的 。 
然而 ， 并 不 是 所 有 浏览 器 都 实现 了 该 行 





ay 
Yo 


可 能 上 述 行为 在 默认 情况 下 是 不 存在 
的 ， 但 我 们 为 何不 目 己 添加 这 种 行为 
We? 所 需 的 只 不 过 数 行 JavaScript 代 码 而 
E 


(1) 取得 文档 中 的 label 元 素 。 


(2) 如 果 1abel 有 for 属性 ， 添 加 一 个 
事件 处 理 函数 。 


(3) 在 label 被 单 击 时 ， 提 取 for 属性 
这 个 值 就 是 相应 表单 字段 的 id 


(4) 确保 存在 相应 的 表单 字段 。 
(5) 让 相应 的 表单 字段 获得 焦点 。 
在 global.js H JNA 

数 focusLabels ， 并 通过 


addLoadEvent 函数 在 页 面 加 载 时 执行 
该 函数 。 

















function focusLabels() ( 
if (!document.getElementsByTagName) ret 
var labels - document.getElementsByTagN 
for (var i20; i«labels.length; i++) { 
if (!labels[i].getAttribute("for")) c 
labels[i].onclick = function() { 
var id - this.getAttribute("for"); 
if (!document.getElementById(id)) r 
var element - document.getElementB 
element.focus(); 
} 
} 
ja 
ddLoadEvent(focusLabels); 


在 浏览 器 中 加 载 contact .html 页 面 ， 
单 击 一 个 标签 束 会 把 焦点 转移 到 关联 的 
表单 字段 中 。 也 许 访客 使 用 的 浏览 器 不 
支持 这 个 行为 。 但 现在 不 一 样 了 ， 现 在 
所 有 浏览 器 都 会 支持 这 个 行为 。 


. 占 位 符 值 


我 们 注意 到 ， 联 系 表 单 中 的 每 个 字段 都 
通过 HTML5 的 placeholder 属性 添加 
了 占 位 符 文 本 ，name 字段 中 有 "your 
name", email 字段 中 有 "your 
email", 4%. 


注意 “从 增进 可 访问 性 的 角度 

说 ， 占 位 符 值 也 很 有 价值 。Web 
Accessibility Initiative 指 南 的 10.4 节 
指出 , “在 用 户 代 理 能 够 正确 处 理 
空 的 控件 之 前 ， 应 该 在 可 编辑 文本 
框 和 文本 区 中 添加 默认 的 、 占 位 字 
符 。[ 优 先 级 3]。” 要 了 解 有 关 Web 
Accessibility Initiative 的 更 多 信息 ， 
请 访问 http://www.w3.orgWAI 。 


过 去 ， 有 些 浏览 器 不 能 正确 识别 空 的 表 
单字 段 ， 从 而 为 键盘 导航 制造 了 麻烦 。 
访客 无 法 通过 按 Tab 键 进入 空 字段 。 


H«label» 标签 类 似 ， 增 强 可 访问 性 对 
任何 人 来 说 都 是 一 件 好 事 。 即 使 是 那些 
不 使 用 键盘 导航 的 人 ， 看 到 表单 字段 中 
显示 着 提示 文本 ， 也 会 觉得 非常 友好 。 


通过 HTML5 的 placeholder 属性 设置 
占 位 符 值 有 一 个 缺点 ， 那 就 是 使 用 旧版 
本 浏览 器 的 用 户 看 不 到 字段 中 的 占 位 符 
文本 (字段 仍然 是 空 的 〉。 





使 用 JavaScript 可 以 保证 字段 中 始终 可 以 
显示 提示 人 信息。 不过， 这 一 次 我 们 不 再 
使 用 DOM 核 心 的 方法 和 属性 ， 而 是 要 
使 用 HTML DOM 中 最 常用 的 一 个 对 
$$: form 对 象 。 


form 对 和 象 


有 读者 可 能 知道 ，HTML 文 档 中 的 
BERTIER AE PTR. BET TUS 
都 有 nodeName . nodeType 之 类 
的 DOM 属 性 。 


而 有 些 元 素 具 有 的 属性 比 DOM 核 
心中 定义 的 还 要 多 。 文 档 中 的 每 个 

表单 元 素 都 是 一 个 form 对 象 ， 
个 form 对 象 都 有 一 

个 elements.length 属性 。 这 个 

AE E 
| : 


form.elements.length 


这 个 返回 值 

与 childNodes .length 不 一 样 ， 
后 者 返回 的 是 元 素 中 包含 的 所 有 市 
点 的 个 数 。 而 form 对 象 的 
elements.length 属性 只 关注 那 
些 属于 表单 元 素 的 元 素 ， 如 input 


. textarea, “2%. 


相应 地 ， 表 单 中 的 所 有 字段 都 保存 
在 form 对 象 的 elements 属性 中 。 
也 就 是 说 ， 下 面 是 一 个 包含 所 有 表 
单元 素 的 数组 : 























form.elements 


同样 ， 这 个 属性 与 childNodes 属 
性 也 不 一 样 ， 后 者 也 是 一 个 数 

组 。childNodes 数组 返回 的 是 所 
有 节点 ， 而 elements 数组 则 只 返 
|Hinput 、select textarea 以 
及 其 他 表单 字段 。 


elements 数组 中 的 每 个 表单 元 素 
都 有 自己 的 一 组 属性 。 比 

如 ，value 属性 中 保存 的 就 是 表单 
元 素 的 当前 值 : 


element.value 


这 行 代码 等 价 于 : 


element.getAttribute("value") 


包含 在 contact .html 中 的 每 个 表单 字 
段 都 有 一 个 初始 的 placeholder E 

性 。 你 可 以 取得 这 些 占 位 符 的 值 并 临时 
将 它们 作为 相应 表单 字段 的 value 。 而 
在 该 字段 获得 焦点 时 ， 再 删除 字段 的 
value 值 。 类 似 地 ， 如 果 用 户 并 没有 在 
字段 中 输入 文本 且 离 开 了 当前 字段 ， 那 
么 再 重新 应 用 占 位 符 值 即 可 。 这 个 例子 
与 第 11 章 中 的 占 位 符 的 例子 是 类 似 的 。 














为 此 ， 你 需要 写 一 个 函数 ， 命 名 
为 resetFields ， 它 只 接受 一 个 form 
a 


(1) 检查 浏览 器 是 否 支持 placeholder 
属性 。 如 果 不 文 持 ， 继 续 。 


(2) 循环 电 历 表单 中 的 每 个 元 系 。 

(3) 如 果 当 前 元 素 是 提交 按钮 ， 跳 过 。 

(4) 为 元 素 获得 焦点 的 事件 添加 一 个 处 
理 函 数 。 如 果 字 上段 的 值 等 于 占 位 符 文 

本 ， 则 将 字段 的 值 设置 为 空 。 

(5) 再 为 元 素 失 去 焦点 的 事件 添加 一 个 
处 理 函 数 。 如 果 字 段 的 值 为 空 ， 则 为 其 
添加 占 位 符 值 。 


(6) 为 了 应 用 样式 ， 在 字段 显示 占 位 符 
值 的 时 候 添 加 placeholder 25. 


这 个 函数 的 定义 如 下 : 











function resetFields(whichform) { 

if (Modernizr.input.placeholder) return 

for (var i=@; i«whichform.elements.len 
var element - whichform.elements[i]; 
if (element.type -- "submit") continu 
var check = element.placeholder || el 
if (!check) continue; 
element.onfocus = function() ( 


var text - this.placeholder || this 
if (this.value == text) { 
this.className = ''; 
this.value = ""; 
} 
} 
element.onblur = function() { 
if (this.value == "") { 


this.className = 'placeholder'; 


this.value = this.placeholder | | 
} 
} 
element.onblur(); 
} 
} 








函数 中 用 到 了 两 个 事件 处 理 函 数 。 
中 ，onfocus 事件 会 在 用 户 通 
键 或 单 击 表单 字段 时 被 触发 ， 


而 onblur 事件 会 在 用 户 把 焦点 移出 表 
单字 段 时 触 友 。 力 外 ， 在 onblur 事件 
定义 之 后 ， 立 即 调用 了 和 它 ， 以 便 在 必要 
时 应 用 占 位 符 值 。 


注意 ”鉴于 不 同 的 浏览 器 对 未 知 
属性 的 实现 方式 有 所 不 同 ， 这 里 同 
时 使 用 了 HTML DOM 的 
splaceholder 属性 和 DOM 的 
getAttribute('placeholder' ) 
Jk. 





把 resetFields 函数 添加 
flglobal.js 文件 中 。 但 我 们 需要 为 它 
传 入 form 对 象 来 调用 它 。 再 编辑 一 个 
函数 prepareForms ， 循 环 遍 历 文 档 中 
的 所 有 form 对 象 ， 并 将 每 个 form 对 象 
传 给 resetFields 函数 。 





function prepareForms() { 
for (var i=6; i<document.forms.length; 
var thisform = document.forms[i]; 
resetFields(thisform); 


Po 


fi FHaddLoadEvent 函数 来 调 
用 prepareForms 。 


addLoadEvent(prepareForms ) ; 


为 了 让 占 位 符 更 突出 一 点 ， 
在 color .css 文件 中 通过 
placeholder 类 修改 字段 的 颜色 : 


input.placeholder { 


color: grey; 


} 





在 不 支持 HTML5 的 浏览 器 中 刷新 
contact.html, @@resetFields pk 
数 的 效果 如 何 。 你 会 看 到 resetFields 
函数 起 到 了 在 支持 HTML5 的 浏览 器 中 
使 用 placeholder 属性 一 样 的 效果 。 


随便 单 击 几 个 字段 ， 或 者 单 击 相应 的 标 
签 试 一 试 。 默 认 值 应 该 消失 。 如 果 在 没 
有 输入 文本 的 情况 下 移动 到 另 一 个 字 
段 ， 默 认 值 应 该 再 次 出 现 。 如 果 输入 了 
文本 ， 那 么 默认 值 就 不 应 该 再 出 现 了 。 


.表单 验证 


围 经 联系 表单 的 下 一 个 任务 涉及 
JavaScript 最 古老 的 用 途 。 


自从 JavaScript 诞 生 之 日 起 ， 客 户 端 表单 


验证 就 拉 开 了 序幕 。 想 法 很 简单 ， 就 是 
在 用 户 提 交 表 单 时 ， 对 提交 的 值 进行 一 
FMA. WRAP Ea, AP es 
看 到 一 个 警告 枉 ， 告 诉 他 哪个 字段 必须 
要 填写 内 容 。 


支持 HTML5 的 浏览 器 终于 针对 一 些 字 
段 实 现 了 原生 的 表单 验证 。 例 如 ， 
Opera 10 可 以 自动 验证 电子 邮件 字段 ， 
如 图 12-19 所 示 。 








Email: 
imyemail.com| =. | 





myemail.com is 
not a legal email 
address 


图 12-19 


当 你 提交 包含 电子 邮件 输入 字段 的 表单 
时 ，Opera 会 基于 RFC 定 义 的 电子 邮件 
格式 来 验证 用 户 的 输入 ， 而 且 启 不 启用 
JavaScript 都 没有 关系 。HTML5 还 定义 
了 其 他 类 型 的 字段 验证 ， 例 如 URL 输 入 
字段 。 对 于 这 些 字 段 而 言 ， 我 们 不 必 在 
表单 中 添加 任何 额外 的 标记 ; 浏览 器 根 
据 输入 字段 的 类 型 就 可 以 完成 验证 。 


HTML5 也 提供 了 required 属性 ， 用 于 
表示 某 个 字段 的 值 是 必须 填写 不 能 留 空 
的 ， 如 图 12-20 所 示 。Opera 10 同 样 支持 
不 依赖 任何 脚本 的 这 一 原生 特性 。 





Name: 


You have to 
specify a value 


图 12-20 


对 于 支持 HTML5 的 浏览 器 而 言 ， 
MD (EST RE RU MER 

个 乐队 网 站 来 说 ， 还 必须 再 灵活 一 
P3 还 得 再 添加 使 用 JavaScript 验 证 表单 
的 功能 。 


使 用 JavaScript 进 行 表单 验证 听 起 来 没有 
什么 ， 而 且 通 常 也 确实 如 此 。 但 如 果 
JavaScript ui Be 写 得 不 好 ， 也 会 带 来 
负面 的 结果 。 假 如 代码 中 包含 错误 ， 最 
终 可 能 会 导致 用 户 根本 无 法 提 TX. 


在 使 用 JavaScript 编 写 验证 表单 的 脚本 
时 ， 要 记 住 三 件 事 。 


验证 脚本 写 得 不 好 ， 反 而 不 如 没有 
验证 。 

干 万 不 要 完 全 依赖 JavaScript。 客户 
问 验 证 并 不 能 取代 服务 器 端的 验 
证 。 即 使 有 了 JavaScript 验 证 ， 服 务 
器 端 照 样 还 应 该 对 接收 到 的 数据 再 
次 验证 。 

客户 端 验 证 的 目的 在 于 帮助 用 户 填 
好 表单 ， 避 人 免 他 们 提交 未 完成 的 表 
单 ， 从 而 节省 他 们 的 时 间 。 服 务 器 
问 验 证 的 目的 在 于 保护 数据 库 和 后 
台 系 统 的 安全 


一 定 要 尽量 保证 验证 过 程 尽 可 能 简单 。 














开始 的 时 候 ， 可 以 只 检查 用 户 是 否 输入 
了 什么 内 容 。 下 面 这 个 函 
以 一 个 表单 元 素 作为 


function isFilled(field) { 
if (field.value.replace(' ','').length 
var placeholder = field.placeholder || 
return (field.value !- placeholder); 


} 





X8 tr fr AHT Za value 属性 的 
length 属性 ， 就 可 以 知道 value 中 是 
个 没有 任何 字符 “〈 不 都 是 空格 ) 。 如 果 
确实 不 包含 任何 字符 ， 函 数 返 回 false 
。 人 否则 ， 继 续 下 面 的 比较 。 


通过 比较 value 属性 与 placeholder 
属性 ， 束 可 以 知道 用 户 是 否 对 占 位 符 文 
AFR UR PAS ABTA], RAG El 
false 。 如 果 上 面 两 个 测试 都 通过 ， 说 
明 用 户 已 经 在 字段 中 填写 了 内 

容 ，isFilled 函数 就 会 返回 true 。 


接 下 来 一 个 类 似 的 函数 是 isEmail 。 这 
个 函数 会 进行 非常 简略 的 检查 ， 看 表单 
的 内 容 是 不 是 一 个 电子 邮件 地 


function isEmail(field) ( 
return (field.value.indexOf("Q") !- -1 


} 





这 个 函数 使 用 indexof 方法 执行 了 两 方 


面 测试 。 这 个 方法 用 于 在 一 个 字符 串 中 
查找 男 一 个 字符 串 第 一 次 出 现 的 位 置 。 
如 果 要 搜索 的 字符 串 存在 ， 则 返回 该 字 
符 串 第 一 个 字符 所 在 的 位 置 。 如 果 没 有 
找到 要 搜索 的 字符 串 ， 则 返回 -1。 函 数 
中 的 第 一 个 测试 在 表单 字段 的 value 属 
性 中 搜索 @ 符 号 。 这 是 电子 邮件 中 绝 不 
能 少 的 一 个 符号 。 如 果 没 有 找到 

(2, isEmail 也 数 就 返回 false 。 第 二 
个 测试 的 原理 相同 ， 只 不 过 搜索 的 是 句 
A C 符号 。 如 果 在 表单 字段 的 value 
属性 中 没有 找到 这 个 字符 ， 那 么 函数 仍 
然 会 返回 false 。 如 果 两 个 测试 都 通过 
J, isEmail ei Zi gt Eltrue 。 


这 个 isEmail 函数 并 不 十 分 可 靠 。 如 果 
用 户 输入 了 一 个 伪造 的 电子 邮件 地 址 ， 
甚至 根本 就 不 是 电子 邮件 地 址 的 字符 
串 ， 验 证 也 有 可 能 通过 。 但 是 ， 验 证 写 
得 太 过 复杂 并 不 是 件 好 事 。 验 证 越 复 
杂 ， 误 报 的 可 能 性 就 会 越 大 。 比 如 ， 很 
多 验证 电子 邮件 的 脚本 都 错误 地 假设 电 
子 邮 件 的 域名 只 能 是 三 个 字母 。 这 样 的 
错误 假设 会 导致 域名 为 info、.name 之 
类 的 邮件 就 不 能 通过 验证 。 


ME, REAA T AANE K 

数 : isFilled 和 isEmail 。 但 你 并 不 
想 对 每 个 表单 字段 都 运行 它们 。 因 此 ， 
还 需要 某 种 方式 来 指定 哪个 字段 是 必 填 
的 ， 哪 个 字段 必须 输入 电子 邮件 地 址 。 


在 HTML 标 记 中 ， 可 以 使 用 HTML5 的 
required 属性 : 














<input type="text" id="name" name="name" 


«input type-"email" id-"email" name="emai 


æ required="required" /> 


注意 ”这 里 的 代码 使 用 了 
required = "required" ， 而 不 
是 仅 指 定 一 个 没有 值 的 required 
属性 。 在 HTML5 中 ， 这 两 种 写法 
都 是 有 效 的 ， 因 为 HIML5 兼 容 这 
两 种 语法 。 尽 管 如 此 ， 我 还 是 建议 
读者 使 用 较为 严格 的 XHTML 语 
法 ， 也 就 是 说 所 有 属性 都 要 赋值 ， 
而 且 单 独 的 标签 要 添加 斜 杠 

Com 


在 CSS 文 件 中 也 可 以 使 用 这 些 属性 。 例 
如 ， 可 以 为 必 填 字段 添加 粗 一 些 的 边 
框 ， 或 者 应 用 一 种 不 同 的 背景 颜色 。 


同样 ， 在 JavaScript 中 也 可 以 使 用 这 些 属 
性 。 下 面 我 们 编写 一 个 名 

为 validateForm 的 函数 。 这 个 函数 以 
对 象 为 参数 ， 并 执行 下 列 操 





(1) 循环 遍历 表单 的 elements 数组 。 


(2) 如 果 发 现 了 required 属性 ， 把 相应 
的 元 素 传 递 给 isFilled 函数 。 


QA 如 果 isFilled 函数 返回 false ， 显 
示警 告 消息 ， 并 且 validateForm 函数 
tH ik Be 


(4) ea 类 型 的 字段 ， 把 
相应 的 元 素 传递 给 isEmail 函数 。 


(5) 如 果 isEmail 函数 返回 false ， 显 








qx E. 3tHvalidateForm 函数 
也 返回 false 。 


(6) 否则 ，validateForm 函数 返回 
true 。 





下 面 就 是 完成 后 的 validateForm ph 
数 : 


function validateForm(whichform) { 
for (var i=@; i<whichform.elements.leng 
var element = whichform.elements[i]; 
if (element.required == 'required') { 
if (!isFilled(element)) { 
alert("Please fill in the "+eleme 
return false; 
} 
} 
if (element.type == 'email') { 
if (!isEmail(element)) { 
alert("The "+element.name+" field 
return false; 


} 
} 


return true; 


} 





这 样 ， 只 要 在 表单 被 提交 时 基于 表单 执 
行 validateFornm 函数 就 可 以 了 。 为 
此 ， 可 以 在 prepareForms 函数 中 通过 
onsubmit 事件 处 理 函 数 来 添加 验证 行 
H: 





function prepareForms() { 
for (var i=0; i<document.forms.length; 
var thisform = document.forms[i]; 
resetFields(thisform); 
thisform.onsubmit = function() { 
return validateForm(this); 


无 论 什么 时 候 提 交 表 单 ， 都 会 触发 
submit 事件 ， 而 事件 会 被 onsubmit 事 
件 处 理 函 数 拦 截 。 执 行事 件 处 理 函 数 
时 ， 会 将 表单 传递 给 validateForm pf 
数 。 如 果 validateForm 函数 返回 true 
， 屿 意味 着 可 以 把 表单 数据 提交 给 服务 
器 。 而 如 果 validateForm 函数 返回 
false ， 提 交 操 作 束 会 被 取消 。 


把 上 面 几 个 表单 验证 函数 都 保存 
fllglobal.js F. 


在 浏览 器 中 刷新 contact .htm1l 。 试 一 
试 ， 在 留 空 表单 或 保持 字段 中 默认 值 的 
情况 下 提交 表单 。 你 应 该 会 看 到 一 个 有 
礼貌 的 警告 框 弹 出 来 ， 告 诉 你 必须 解决 
哪些 问题 才能 提交 表单 ， 如 图 12-21 所 
示 。 





a SETT] 
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图 12-21 
6. 提交 表单 


针对 联系 表单 的 最 后 一 项 改进 ， 就 是 给 
页 面 添加 一 点 Ajax。 还 记得 前 面 创建 的 
submit.html 页 面 吗 ? 如 果 你 正确 地 
提交 了 表单 ， 表 单 束 会 打 
Jfsubmit.html 显示 感谢 信息 。 如 果 
表单 能 够 发 送 一 个 Ajax 请 求 ， 而 感谢 信 
息 能 以 鞭 入 方式 添加 到 表单 所 在 的 页 
面 ， 那 种 体验 想必 会 更 好 。 说 白 了 ， 就 
是 表单 提交 成 功 之 后 ， 不 打开 新 页 面 
了 ， 而 是 拦截 提交 请 求 ， 自 己 显示 结 
果 。 “关于 拦截 的 介绍 请 参考 第 7 
E.) 

先 在 global.js 文件 中 添加 第 7 章 的 
getHTTPObject iK Zi: 





function getHTTPObject() { 
if (typeof XMLHttpRequest -- "undefined 
XMLHttpRequest = function () { 
try { return new ActivexObject("Msx 
catch (e) {} 
try { return new ActivexObject("Msx 
catch (e) {} 
try ( return new ActivexObject("Msx 
catch (e) {} 
return false; 
} 
return new XMLHttpRequest(); 
} 





然后 ， 创 建 一 个 加 载 图 像 ， 在 Ajax 请 求 
刚 局 动 时 把 它 添加 到 文档 中 。 如 果 你 手 
上 没有 动画 加 载 GIF， 可 以 

到 http://ajaxload.info 去 创建 一 个 。 把 这 





个 加 载 图 像 命 名 为 1oading.gif , Jf 
将 它 放 在 images 文件 夹 中 。 


把 下 面 的 displayAjaxLoading rf Zits 
加 到 global.js 文件 中 。 这 个 函数 接受 
一 个 DOM 元 素 作 为 参数 ， 人 然后 把 它 的 
所 有 子 元 素 都 删除 掉 。 删 除 之 后 ， 再 把 
loading.gif 图 像 添加 到 该 元 素 中 。 


function displayAjaxLoading(element) { 
while (element.hasChildNodes()) { 
element.removeChild(element.lastChild 
} 
var content = document.createElement("i 
content.setAttribute("src","images/load 


content.setAttribute("alt","Loading..." 
element.appendChild(content); 





好 玩 的 地 方 到 了 。 m 
submitFormWithAjax 函数 了 。 

数 的 第 一 个 参数 是 一 个 form 
n 目标 对 象 ， EHE 
"ME. 


(1) 调用 displayAjaxLoading 函数 ， 
删除 目标 元 素 的 子 元 素 ， 并 添 
加 loading.gif 图 像 。 


Bo uu o PUSH 
串 ， 以 便 通 过 Ajax 请 求 发 送 。 


(3) 创建 方法 为 POST 的 Ajax 请 求 ， 把 表 
单 的 值 发 送 给 submit .html 。 


(4) uan. 解析 啊 应 并 在 目标 
元 素 中 显示 结 











(5) 如 有 果 请 求 失败 ， 显 示 错 误 消 息 。 


submitFormWithAjax 函数 在 修改 
DOM 和 显示 加 载 图 像 之 前 ， 首 先 要 检 
查 是 否 存在 有 效 的 XMLHttpRequest 对 
象 。 





function submitFormWithAjax( whichform, t 
var request - getHTTPObject(); 
if (!request) { return false; } 


displayAjaxLoading(thetarget); 





然后 ， 创 建 一 个 URL 编 码 的 表单 数据 字 
符 串 ， 以 便 通 过 POST 请 求 发 送 到 服务 
T 这 个 URL 字 符 串 的 格式 与 URL 参 数 
日 同 : 


name=value&name2=value2&name3=value3 





表单 中 每 个 字段 的 值 都 会 被 编码 为 这 种 
数据 字符 串 。 比 如 说 ， 如 果 表 单 中 包含 
消息 “Why does 2+2=4?”， 字 符 串 就 类 
似 如 下 所 示 : 


message-Why does 242-4?&name-me&email-me( 





但 是 ， 这 里 面 的 加 号 《+) 、 等 于 号 
(=) 和 问号 〈?) 都 会 融 来 问题 。 











。 等 于 号 的 意思 是 不 是 说 表单 里 有 一 
个 字段 名 叫 2， 而 它 的 值 是 4 呢 ? 


。 加 号 是 一 个 编码 后 的 空格 ， 还 古 一 
个 普通 的 加 号 ? 
。 问号 表示 它 后 面 是 参数 列表 吗 ? 


AAS tee Fe RHE FY LME H JavaScript 
的 encodeURIComponent 函数 把 这 些 值 
编码 成 URL 安 全 的 字符 串 。 这 个 函数 会 
Doe 的 字符 转换 成 对 应 的 ASCII 编 





message=Why%20d0es%202%2B2%3D4%3F%26&name 








接 下 来 ， 就 像 前 面 验证 表单 一 样 ， 循 环 
忆 历 表单 的 每 个 字段 ， 但 这 次 不 是 验 
证 ， 而 是 收集 它们 的 名 字 和 编码 后 的 
值 ， 把 结果 保存 在 一 个 数组 中 : 


var dataParts = []; 

var element; 

for (var i20; i<whichform.elements. length 
element = whichform.elements[i]; 
dataParts[i] = element.name + '=' + enc 


} 





收集 到 所 有 数据 后 ， 把 数组 中 的 项 用 和 
号 〈&) 联结 起 来 


var data = dataParts.join('&'); 





然后 ， 向 原始 表单 的 action 属性 指定 
的 处 理 函 数 发 送 POST 请 求 : 





request.open('POST', whichform.getAttribu 


并 在 请 求 中 添加 application/x-www- 
form-urlencoded 头 部 : 


request.setRequestHeader("Content-type", 





这 个 头 部 信息 对 于 POST 请 求 是 必需 
的 ， 它 表示 请 求 中 包含 URL 编 码 的 表 
单 。 


现在 ， 请 求 已 经 准备 好 了 。 在 发 送 请 求 
之 前 ， 还 需要 创建 处 理 啊 应 的 
onreadystatechange 事件 处 理 程序 。 


服务 器 返回 的 啊 应 就 是 submit .html1 
页 面 。 这 个 页 面 与 站 点 中 其 他 页 面 一 
样 ， 也 包含 头 部 区 域 、 导 航 和 内 容 。 
为 我 们 是 想 把 结果 加 载 到 已 有 的 页 面 
中 ， 所 以 就 不 需要 头 部 区 域 和 导航 了 。 
只 要 从 页 面 中 取得 <article> TAME 
够 了 。 而 完整 的 页 面 放 在 那里 ， 就 是 预 
备 着 在 Ajax 无 效 的 情况 下 ， 就 直接 返回 
submit.html 页 面 。 


如 果 你 在 使 用 目 己 常用 的 服务 器 端 脚本 
语言 编写 啊 应 ， 那 么 可 以 只 为 Ajax 请 求 
输出 必要 的 标记 。 但 目前 来 讲 ， 只 能 假 
设 没 有 服务 器 端 脚本 ， 因 此 只 能 使 用 
Ajax 来 增加 一 点 用 户 体验 。 


为 了 从 响应 中 提取 出 <article> 元 素 ， 
你 得 考虑 使 用 一 种 叫做 正则 表达 式 的 技 
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式 ， 用 来 匹配 字符 串 中 的 不 同 部 分 。 


下 面 就 是 将 会 用 于 提取 <article> 中 内 
容 的 正则 表达 式 : 


/<article>([\s\S]+)<\/article>/ 


在 JavaScript 中 ， 正 则 表达 式 的 每 个 模式 
都 以 一 个 斜 枉 〈/) 开头 和 结尾 。 如 果 
BETA ALG RAL, JH BRAT MT 
其 转 义 ， 就 像 上 面 模式 中 对 结束 的 
</article> 标签 中 的 斜 杠 转 义 那 样 。 


要 查找 与 正则 表达 式 模式 匹配 的 字符 ， 
只 要 输入 想 碍 找 的 字符 即 可 。 因 为 要 提 
取 的 内 容 以 <article> 开始 以 
«/article» 结尾 ， 因 此 就 直接 写 出 来 
LU s 


注意 ”正则 表达 式 语 法 中 会 用 到 

一 些 特殊 字符 ， 例 如 方 括号 和 竖 

线 。 如 有 果 想 直接 匹配 这 些 字 符 ， 同 
样 需要 对 它们 进行 转 义 ， 就 像 对 和 侍 
杠 转 义 一 样 。 比 如 说 ， 如 有 果 想 在 模 
式 中 匹配 星 号 (* ) ， 就 需要 写 
成 \* ， 因 为 * 在 正则 表达 式 中 用 于 
表示 重复 。 要 了 解 其 他 特殊 字符 ， 
请 参 

考 http:Wen.wikipedia.org/wiki/Regular i 











fE<article> 和 </article> 之 间 ， 是 
一 个 捕获 组 ， 用 于 捕获 位 于 开始 和 结束 
标签 之 间 的 文本 。 捕 获 组 中 的 方 括号 包 


含 了 要 匹配 的 字符 。 而 圆 括号 定义 的 捕 
获 组 是 为 了 便于 后 面 提取 其 中 匹配 的 内 
容 。 


如 末 你 想 猜 出 两 个 标签 之 间 可 能 包含 的 
所 有 字符 ， 即 使 你 的 模式 写 得 再 长 ， 最 
终 可 能 还 是 无 济 于 事 。 为 此 ， 我 们 束 在 
方 括号 中 使 用 了 特殊 子 从 米 表示 要 伍 找 
的 内 容 。 在 这 个 正则 表达 式 中 ，\s 匹 配 
任意 空白 字符 ， 而 \S 匹 配 任意 非 空 白字 
符 ， 包 括 回 车 竺 和 换行 待 。 当 然 ， 除 此 
之 外 ， 正 则 表达 式 中 还 有 很 多 其 他 字符 
类 ， 用 于 匹配 数值 、 单 词 、 非 单词 之 类 
的 情况 。 


最 后 ， 在 方 括号 后 面 ， 使 用 一 个 加 号 
(+) 表示 前 面 的 模式 重复 一 次 或 多 

X. HR CO 表示 前 面 的 模式 重复 零 
或 多 次 。 


简单 地 说 ， 正 则 表达 式 模 
xt/<article>([\s\S]+) 
<\/article>/ 可 以 理解 为 如 下 : 


e 查找 一 个 字符 串 ， 这 个 字符 串 以 
«article» 开头 ， 后 跟 一 或 多 个 空 
格 或 非 空格 字符 ， 最 后 还 有 一 个 
</article> ; 

e 把 这 个 字符 串 中 的 空格 及 非 空格 字 
ae eee 
是 取 。 


有 了 正则 表达 式 之 后 ， 就 可 以 编写 
onreadystatechange P% J: 















































request.onreadystatechange - function () 
if (request.readyState -- 4) ( 
if (request.status -- 200 || reques 


var matches = request.responseTe 
if (matches.length > @) ( 
thetarget.innerHTML = matches[1 


} else { 
thetarget.innerHTML = '«p»Oops, 

} 

} else { 
thetarget.innerHTML = '«p»' + req 

} 

} 
}; 





与 第 7 章 中 的 Ajax 示例 类 似 ， 这 个 函数 
一 开始 也 是 检测 值 为 4 的 readyState 
属性 ， 然 后 再 验证 状态 值 是 不 是 200。 


在 得 到 成 功 的 啊 应 后 ， 束 可 以 通过 
JavaScript 的 match 方法 对 
responseText 应 用 正则 表达 式 

So match 方法 以 正则 表达 式 为 参数 ， 
返回 包含 各 种 匹配 结果 的 数组 。 


数组 matches 的 第 一 个 元 素 〈 索 引 为 
0) 是 responseText 中 与 整个 模式 匹 
配 的 部 分 ， 即 包括 <article> 和 
«/article» 在 内 的 部 分 。 因 为 模式 中 
包含 了 一 个 捕获 组 〈 一 对 圆 括 号 ) ， 
此 matches 的 第 二 个 元 素 〈 索 引 为 1) 是 
responseText 中 与 捕获 组 中 的 模式 匹配 
HySp4r. fx TH. RUR— BS 
组 ， 因 此 matches 中 也 只 包含 两 个 元 
Lum 


在 取得 了 捕获 的 内 容 之 后 ， 函 数 把 
matches[1] 中 保存 的 内 容 赋值 给 了 目 
标 元 素 的 innerHTML 属性 ， 响 应 处 理 到 
此 结束 。 























vy 


iXfFÉ, submitFormWithAjax 函数 中 剩 
下 的 代码 就 是 发 送 请 求 ， 并 返回 true 
， 表 示 函 数 已 经 成 功 发 送 请 求 。 





request.send(data) ; 
return true; 


}; 





完成 后 的 submitFormWithAjax 函数 如 
下 所 示 : 





function submitFormWithAjax( whichform, t 
var request = getHTTPObject(); 
if (!request) { return false; } 
displayAjaxLoading(thetarget) ; 
var dataParts = []; 
var element; 
for (var i=@; i«whichform.elements.len 
element - whichform.elements[i]; 
dataParts[i] = element.name + '=' +e 
} 
var data = dataParts.join('&'); 
request.open('POST', whichform.getAttri 
request.setRequestHeader("Content-type" 
request.onreadystatechange - function ( 
if (request.readyState -- 4) ( 
if (request.status -- 200 || requ 
var matches = request.response 
if (matches.length > 0) { 
thetarget.innerHTML = matches 


} else { 
thetarget.innerHTML = '«p»Oop 

} 

} else { 
thetarget.innerHTML = '«p»' +r 

} 

} 
}; 


request.send(data); 
return true; 


}; 


Pp 


现在 ， 可 以 利用 submitFormWithAjax 
函数 来 执行 拦截 表单 提交 的 任务 了 。 为 
此 ， 需 要 修改 prepareForms 函数 ， 调 
用 submitFormwithAjax ， 并 给 它 传递 
当前 的 fo rm 对 象 和 页 面 中 的 article 
元 素 作 为 参数 。 修 改 后 的 函数 应 该 完成 
如 下 操作 。 


e 如 条 表单 没有 通过 验证 ， 返 回 
false ; 因为 验证 失败 ， 所 以 不 能 
提交 表单 。 

e 如 果 submitFormWithAjax 函数 成 
功 发 送 了 Ajax 请 求 并 返回 true ， 
则 让 submit 事件 处 理 函 数 返 回 
false ， 以 便 阻 止 浏览 器 重复 提交 
表单 。 

e 否则 ， 说 明 submitFormwithAJjax 
没有 成 功 发 送 Ajax 请 求 ， 因 而 让 
submit 事件 处 理 函数 返回 true ， 
让 表单 像 什 么 都 没有 发 生 一 样 继续 
通过 页 面 提交 。 


以 下 就 是 完成 上 述 三 项 操作 的 
prepareForms 函数 : 





function prepareForms() ( 
for (var i20; i«document.forms.length; 

var thisform = document.forms[i]; 

resetFields(thisform) ; 

thisform.onsubmit = function() { 
if (!validateForm(this)) return fal 
var article = document.getElementsB 
if (submitFormWithAjax(this, articl 
return true; 
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好 了 ， 现 在 提交 一 下 表单 试 试 ， 你 应 该 
看 到 感谢 信息 出 现在 了 同一 个 页 面 上 ， 

RAKAMI. Ma, HAA wT a 
的 地 址 栏 。 在 提交 了 表单 之 后 ， 你 看 到 
的 还 是 contact .htm1l ， 而 不 

是 submit.html 。 


联系 页 面 制作 完毕 ， 当 然 整个 网 站 也 随 
之 大 功 告 成 了 。 


12.5.7. ”压缩 代码 


虽说 你 的 网 站 已 经 可 以 上 线 了 ， 但 别 坊 
了 还 有 一 件 重 要 的 事情 要 做 : 改进 性 
能 ! 此 时 此 刻 ，global.js 文件 的 大 小 
是 13 KB， 不 算 大 ， 而 通过 压缩 ， 它 还 
能 再 “瘦身 ”。 我 们 在 第 5 章 曾 经 讨论 

过 ， 用 来 压缩 JavaScript 代 码 的 工具 不 
少 。 在 此 ， 我 们 要 使 用 的 是 谷歌 的 
Closure Compiler。 通 过 它 的 在 线 表 单 ， 
只 要 粘贴 JavaScript 进 去 ， 束 可 以 得 到 压 
Zt p: HJ s Re 


在 浏览 器 中 打开 http://closure- 
compiler.appspot.com/home ， 把 
global.js 中 的 代码 复制 粘贴 到 左 侧 文 
本 区 /ADD YOUR CODE HERE 的 下 
面 ， 如 图 12-22 所 示 。 
































图 12-22 


单 击 Compile 按 钮 ， 然 后 就 可 以 得 到 编 

译 后 的 代码 ， 还 有 相关 的 统计 信息 。 以 
我 编写 的 global.js 文件 为 例 ， 得 到 的 
结果 如 下 : 


。 原始 大 小 12.43 KB (gzip 压 缩 后 
3.12 KB) 

。 编译 后 大 小 8.62 KB gzip 压缩 后 
2.36 KB) 

e 比 原始 大 小 减少 了 30.64% (gzip 压 
缩 版 减少 了 24.22%) 


注意 ， 根 据 所 添加 的 注释 及 其 他 代码 的 
多 少 ， 结 果 会 有 所 差 腊 。 


在 scripts 文件 夹 中 新 建 一 

个 global.min.js 文件 ， 把 压缩 之 后 

的 代码 复制 粘贴 到 该 文件 中 。 然 后 ， 把 
所 有 页 面 的 <script> 标签 中 引用 的 脚 
本 改 为 这 个 压缩 版 。 








12.6 小结 
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网 站 终于 可 以 上 线 了 。 不 客气 地 说 ， 你 
为 他 们 设计 的 这 个 站 点 在 网 络 上 绝对 可 
以 风 麻 一时。 更 重要 的 是 ， 你 把 内 容 都 
放 到 了 有 效 的 、 语 义 化 的 HIML5 标 签 

里 面 ， 并 用 外 部 样式 表 实 现 了 整个 外 观 
设计 。 最 后 ， 又 利用 JavaScript 和 DOM 

人 
J] 增强。 


而 且 ， 即 便 你 把 这 些 增强 的 功能 去 掉 一 
部 分 ， 甚 至 全 都 拿 走 ， 整 个 站 点 照样 可 
以 完美 地 运行 。DOM 脚 本 在 这 里 并 不 
是 必需 的 ， 但 有 了 它 ， 光 临 站 点 的 访客 
们 会 有 更 好 的 体验 。 想 想 看 ， 这 个 乐队 
居然 是 虚构 的 ， 就 连 我 都 有 点 为 你 愤愤 
不 平 啊 ! 


那 接 下 来 还 要 学 习 什 么 ?从 某 种 意义 上 
说 ， 你 的 学 习 可 以 告 一 段落 了 。 通 过 本 
书 ， 你 不 仅 掌 握 了 DOM 背 后 的 理论 知 
识 ， 还 把 它 实 际 运用 到 了 构建 完整 的 站 
点 上 面 。 利 用 从 本 书 中 学 到 的 各 种 方法 
和 属性 ， 你 还 能 创造 出 更 具 实 用 性 也 更 
加 强大 的 功能 。 


但 从 男 外 一 个 角度 说 ， 你 的 前 端 开 友 之 
路 才刚 刚 开 始 。 本 书 只 向 你 展示 了 通过 
少数 DOM 方 法 所 能 实现 的 少数 功能 。 








不 仅 这 些 方法 还 有 更 加 广泛 的 用 途 ， 而 
且 从 未 提 及 的 很 多 其 他 方法 都 有 竺 你 去 
探索 呢 。 


基于 DOM 的 脚本 编程 是 一 项 值得 深入 
掌握 的 技术 。 和 希望 本 书 能 让 你 对 
JavaScript 和 DOM 产 生 初 恋 一 般 的 美好 
感觉 。 更 希望 你 能 肩负 起 一 位 技术 人 应 
有 的 责任 ， 坚 守 DOM 可 用 性 的 阵地 ， 
并 且 能 够 乐 在 其 中 。 在 光怪陆离 的 现实 
世界 中 ， 你 稍 不 留神 就 会 误 入 歧途 ， 抒 
进 一 味 标新立异 的 泥 淖 里 。 有 时 候 ， 只 
要 静 下 心 来 ， 回 头 看 一 看 ， 把 视角 放 得 
更 开 闪 一些， 问题 就 会 变 得 很 清楚 。 从 
Tim Berners Lee 发 明 万 维 网 (World 
Wide Web) 至 今 ， 它 的 宏伟 愿景 就 没 
有 改变 过 : 


Web 的 无 所 不 在 是 它 的 魅力 。 保 证 
任何 人 都 能 无 隐 但 地 使 用 它 ， 是 一 
个 最 基本 的 原则 。 


Web 中 无 处 不 在 的 超 文本 文档 具有 天 然 
的 可 访问 性 。 之 所 以 变 得 让 人 处 处 受 
限 ， 仅 仅 是 由 于 我 们 没有 作出 正确 的 选 
择 。 通 过 综合 Web 标 准 和 最 佳 实践 ， 让 
我 们 一 起 来 保障 Web 的 开放 、 无 障碍 。 


* RAR i RH 
。 把 表现 性 的 信息 都 分 离 到 CSS 样 式 
表 中 


。 负 责任 地 使 用 不 唐 突 的 JavaScript 来 
应 用 行为 增强 ， 同 时 确保 平稳 退 
b. 











现在 ， 我 们 正 处 于 Web 发 展 的 十 字 路 
口 。 随 着 Ajax 技术 的 普及 和 HTML5 的 


出 现 ， 桌 面 软件 与 Web 应 用 之 间 的 界限 
己 经 越 来 越 不 分 明了 。 在 努力 推动 Web 
回 前 发 展 的 同时 ， 还 要 坚守 它 作 为 一 个 
无 处 不 在 的 媒体 的 初 囊 ， 势 必要 面临 诸 
多 挑战 ， 战 胜 各 种 困难 。 


接 下 来 的 路 在 何方 ， 这 个 问题 只 能 你 目 
己 来 回答 。 我 只 能 告诉 你 ， 这 是 一 个 令 
Web 设 计 师 激动 不 已 的 时 代 。 





p. 


p. 
y. 


6. 


Mto JavaScript 
ES 


本 书 从 头 到 尾 一 直 都 在 介绍 DOM 的 基 
础 知识 。 我 们 学 习 了 如 何 使 用 标准 的 
DOM 方 法 来 完成 常见 的 操作 ， 如 何在 
脚本 中 最 有 效 地 使 用 这 些 方法 。 oe 
己 经 感觉 到 了 ， 有 时 候 自 己 的 代码 会 

得 十 分 元 长 ， 其 中 不 少 还 都 是 重复 的 。 
如 有 果 只 使 用 诸如 
document.getElementById 之 类 的 
DOM 方 法 ， 时 间 一 长 不 免 让 人 心 生 大 
fis. Kink, (RZ JavaScript E te ft 

的 “魔术 ”函数 〈 像 $) 不 仅 可 以 
“4document.getElementByld 来 用 ， 
还 能 用 来 完成 这 个 方法 做 不 到 的 更 多 事 


T8. 
pris, un E 具有 如 
下 一 些 优点 
° ee 了 大 量 用 户 的 测试 和 验 
上 够 很 容易 地 与 已 有 的 开发 框架 
集成 。 


e 库 为 大 多 数 日 常 琐碎 的 DOM 编 程 
工作 提供 了 方便 、 简 洁 的 方案 ， 每 
个 函数 都 能 节省 很 多 行 代码 。 

e 库 很 好 地 解决 了 跨 浏览 器 的 问题 ， 

















让 你 更 省 心 。 


库 可 以 把 你 从 开发 工作 中 解脱 出 来 ， 让 
你 专注 于 了 最 重要 的 环节 ， 极 大 地 提升 工 
作 效 率 。 虽 然 使 用 库 的 好 处 很 多 ， 但 也 
不 是 不 存在 问题 。 


。 库 是 别人 而 不 是 你 自己 编写 的 。 你 
可 能 不 了 解 它 的 内 部 工作 机 制 ， 
此 很 难 调试 bug 或 解决 由 它 所 导致 


的 问题 。 


要 使 用 库 ， 就 要 把 它 集 成 到 脚本 
中 。 这 样 就 会 加 重 页 面 加 载 的 人 负 
担 ， 挤 占用 户 有 限 的 带宽 。 


混合 使 用 多 个 库 可 能 会 造成 冲突 ， 
同时 也 会 造成 功能 浪费 。 


如 果 你 对 库 只 能 亦 步 亦 趋 而 不 能 超越 ， 
那 它 也 会 成 为 你 不 思 进 取 的 慢性 毒药 。 
在 决定 使 用 库 之 前 ， 建 议 大 家 先 花 点 时 
间 真 正 掌 握 本 书 介绍 的 JavaScript 和 
DOM 编 程 技术 。 从 第 1 章 开 始 ， 我 们 就 
一 直 强 调理 解 工 作 机 制 的 重要 性 ， 而 不 
要 停留 在 问题 的 表面 上 。 唾 手 可 得 的 库 
比比 锋 是 ， 稍 后 我 们 就 会 接触 一 些 ， 但 
是 如 末 你 不 能 理解 它们 背后 的 工作 机 
制 ， 对 你 和 你 的 程序 都 不 能 算是 什么 好 
事 。 如 果 你 对 某 个 库 理 解 不 透 ， 而 这 个 
库 又 假设 你 知道 相关 细节 ， 那 你 就 很 可 
能 被 一 些 琐 碎 的 问题 绊 住 脚 。 


在 此 声明 一 下 ， 我 本 人 与 这 些 库 没有 任 
何 天 系 ， 因 此 不 会 厚 此 薄 彼 。 我 也 不 认 
为 这 些 库 在 任何 情况 下 都 是 最 佳 选择 ， 

也 不 是 次 只 有 这 几 个 库 可 供 选择 。 下 面 
所 举 的 例子 ， 都 是 为 了 更 好 地 说 明 如 何 




















利用 库 来 更 简单 地 完成 本 书 前 面 介 绍 的 
那些 任务 。 


接 下 来 我 们 会 重 温 前 面 涉及 的 如 下 主 
题 。 


e 语法 

。 PETER 

e 操作 DOM 元 素 
。 处 理事 件 

e 动画 

e Ajax 


你 会 看 到 怎么 通过 库 来 完成 这 些 任 务 
通常 要 用 的 代码 都 会 更 少 一 些 ， 以 
及 为 什么 说 使 用 库 能 让 你 把 精力 更 多 地 
E 











注意 ”对 任何 一 个 任务 来 说 ， 每 
个 库 都 会 提供 多 种 实现 方法 。 我 只 
会 从 中 选择 一 两 种 我 认为 最 佳 或 最 
有 效 的 方法 ， 不 可 能 把 每 个 库 完 成 
这 些 任务 的 所 有 可 能 性 都 列举 出 
来 。 因 此 ， 请 读者 通过 阅读 这 些 库 
的 文档 来 了 解 其 他 的 方法 。 
在 使 用 库 之 前 ， 最 重要 的 是 先 搞 清楚 哪 
个 库 适合 自己 的 需要 。 下 面 我 们 就 介绍 
儿 条 选择 库 时 需要 注意 的 事项 。 











B. 
p. 
y. 


6. A.1 


选择 合适 的 库 





在 选择 库 的 时 候 ， 你 会 发 现 自己 将 面临 
上 百 种 选择 。 要 作出 正确 的 选择 ， 建 议 
你 考虑 如 下 问题 。 


它 具 备 你 需要 的 所 有 功能 吗 ? 混 
合 使 用 多 个 库 有 可 能 导致 问题 。 一 
些 常见 的 方法 ， 如 $() 和 get()， 
里 然 表 面 上 相同 ， 但 功能 却 完全 不 
一 样 。 此 外 ， 如 果 同 时 使 用 多 个 
库 ， 重 复 的 功能 和 元 余 代 码 也 是 不 
可 避免 的 。 

它 的 功能 是 否 比 你 想 要 的 还 多 ? 
功能 太 少 是 一 个 问题 ， 但 功能 过 多 
同样 不 好 。 如 果 库 中 包含 很 多 你 用 
不 到 或 者 不 能 完全 利用 的 功能 ， 最 
好 还 是 选择 一 个 功能 少 一 些 的 版 
本 ， 至 少 能 加 快 下 载 的 速度 。 开 发 
移动 应 用 时 这 一 扣 尤 其 要 考虑 。 
它 是 模块 化 的 吗 ? 在 解决 文件 大 
小 问题 时 ， 功 能 丰富 的 库 通 党 使 用 
模块 化 的 方法 ， 把 不 同 功能 分 割 保 
存 到 不 同 的 文件 中 。 这 样 ， 你 就 可 
以 只 加 载 包 含 相 应 功能 的 个 别 文 
件 ， 从 而 降低 下 载 量 。 多 数 情况 
下 ， 丽 怕 都 得 事先 加 载 所 有 必需 的 
文件 ， 只 有 少数 库 提供 了 动态 加 载 
机 制 ， 让 你 能 够 按 需 动态 加 载 文 
件 。 动 态 加 载 文 件 时 ， 还 要 事先 考 
虑 到 请 求 的 次 数 。 经 验 表 明 ， 一 次 














请 求 一 个 大 文件 ， 要 比 多 次 请 求 多 
ANS SCP SEHE 

它 的 支持 情况 怎么 样 ? 如 果 库 的 
背后 没有 活路 的 开发 人 员 社 区 维 

护 ， 就 意味 着 bug 没 人 修改 ， 功 能 
JIRE. MAATA, EHA 
维护 的 人 多 本 里 也 说 明 它 的 问题 更 
少 ， 也 更 可 徘 。 库 背后 的 社区 不 仪 
仪 意味 着 修复 和 功能 ， 也 意味 着 在 
你 需要 帮助 时 能 够 及 时 得 到 很 多 人 
的 文 持 。 

它 有 文档 吗 ? 没有 文档 ， 会 让 人 
无 所 适 从 。 是 这 样 的 ， 也 许 你 会 碰 
到 别人 不 知道 什么 时 候 写 的 几 个 使 
用 示例 ， 但 如 果 没 有 官方 的 文档 ， 

至 少 说 明 它 的 开发 人 员 不 够 投入 ， 

WE ea ee 
途 。 

它 的 许可 合适 吗 2 别 以 为 可 以 在 
线 碍 看 源 代码 ， 目 己 就 可 以 想 怎么 
用 就 怎么 用 了 。 在 诀 定 使 用 一 个 库 
之 前 ， 必 须 查 证 自己 的 用 途 包含 在 
它 的 许可 范围 内 ， 如 果 有 特殊 需 

求 ， 束 更 要 事先 确定 了 。 


在 选 定 了 一 个 合适 的 库 并 在 此 基础 上 有 
了 新 的 发 明 创 造 之 后 ， 别 态 记 回馈 社 

区 ! 这 些 库 都 是 开 太 人 员 无 私 奉 献 的 结 
mo IIE ABR ACRES TB], ait 
是 为 了 改进 你 每 天 在 用 的 工具 。 如 果 你 
不 能 帮助 改进 库 的 功能 或 者 修改 bug， 

可 以 提供 一 些 使 用 示例 和 教程 啊 ， 束 算 
帮 着 写 写 文档 也 是 功德 无 量 的 。 总 之 ， 
只 要 有 心 ， 不 管 做 什么 都 会 促进 库 的 展 
好 发 展 。 


A.1.1 有 代表 性 的 库 














为 了 撰写 这 个 附录 ， 我 根据 前 面 的 标准 
选择 了 几 个 有 代表 性 的 库 ， 中 间 也 掺 杂 
把 个 人 的 喜好 。 直 说 吧 ， 后 面 的 大 多 数 
示例 都 是 使 用 jQuery 4 写 的 ， 少 数 使 用 


的 


古 具 有 类 似 功 能 的 其 他 库 。 这 些 库 各 


有 长 短 ， 简 述 如 下 。 


jQuery Chttp://jquery.com ) 官方 网 
站 说 它 是 “一 个 快速 简洁 的 
JavaScript, SJ T ff HTML XC 
档 搜 索 、 事 件 处 理 、 动 画 以 及 Ajax 
交互 ， 从 而 实现 快速 Web 开 发 。 
jQuery 的 设计 目的 是 为 了 改变 你 编 
写 JavaScript 程 序 的 方式 。 ”jQuery 
极为 强大 的 选择 方法 、 连 级 语法 以 
及 简化 的 Ajax 和 事件 方法 ， 都 会 让 
你 的 代码 变 得 简洁 且 容 易 理解 。 这 
个 库 的 背后 还 有 一 个 非常 大 的 社 
区 ， 包 括 大 量 插件 开发 人 员 ， 他 们 
开发 的 插件 极 大 增加 了 库 的 功能 
Prototype (http://prototypejs.org ) 
把 自己 描绘 成 “一 个 由 在 简化 动态 
Web 应 用 开发 的 JavaSeript 柜 

HA ds ag 了 很 多 非常 棒 
的 DOM 操 作 功 能 ， 还 有 一 个 广 受 
好 评 的 Ajax 对 象 ， 它 是 出 名 最 早 的 
一 个 JavaScript 库 ， 也 是 通过 $() SE 
现 选 择 功 能 的 蜡 祖 。 

The Yahoo! User Interface (YUI) 
Library Chttp://developer.yahoo.com/ 
) 的 定位 是 “一 套用 JavaScript 编 写 
的 实用 函数 和 控件 ， 可 用 来 基于 
DOM、DHTML 以 及 AJAX 构 建 高 
交互 性 的 Web 应 用 。YUI 还 包含 了 
一 些 核心 的 CSS 资 源 。”YUI 的 开发 
人 员 社 区 是 很 值得 称道 的 ， 它 的 文 
档 也 可 圈 可 点 。 这 个 库 涵盖 的 功能 

















非常 广泛 ， 从 简单 的 DOM 操 作 到 
高 级 的 效果 ， 以 及 全 功能 的 应 用 程 
序 部 件 ， 只 要 你 能 想到 的 ， 它 都 
有 。 由 于 功能 全 面 ，YUI 被 按照 命 
名 空间 切割 成 很 多 独立 的 小 文件 ， 
也 正 因为 如 此 ， 有 些 使 用 者 有 时 候 
会 搞 不 清 自己 到 底 需 要 哪个 文件 ， 
到 哪里 去 找到 该 文件 。 光 API 列 表 
就 长 达 20 页 ， 这 个 库 的 规模 项 不 难 
想象 了 。 

Dojo 

Toolkit Chttp://www.dojotoolkit.org/ 
) 说 它 能 “ 帮 你 节省 时 间 ， 人 性 能 优 
异 ， 可 以 让 开发 过 程 收 放 自 如 。 它 
是 经 验 丰 富 的 开发 人 员 为 构建 伟大 
的 Web 体 验 而 提供 给 你 的 工具 

包 。2”Dojo 确 实 是 一 个 功能 丰富 的 
JavaScript 开 发 工具 包 ， 很 多 国际 知 
名 的 大 公司 都 在 用 。 它 的 开发 人 员 
社区 也 很 上 庞大， 文档 做 得 也 非常 
好 ， 市 面 上 有 不 少 关 于 它 的 书 。 
MooTools (http://mootools.net/ ) 
说 自己 是 “一 个 小 巧 、 模 块 化 、 面 
向 对 象 的 JavaScript 框 架 ， 适 合 中 高 
级 JavaScript 开 发 人 员 。 利 用 它 精 
巧 、 文 档 完 备 且 前 后 一 致 的 APL， 
可 以 编写 出 强大 、 有 灵活 而 又 能 够 跨 
浏览 器 的 代码 。”MooTools 的 文档 
写 得 非常 好 ， 用 户 社 区 也 有 相当 规 
模 。 这 个 库 不 仅 包 含 一 些 非 常 好 用 
的 DOM 增 强 API， 它 的 Moo.fx 效 果 
库 更 是 令 人 叫绝 ， 能 够 实现 各 式 各 
样 的 或 简单 或 复杂 的 网 页 动画 。 











注意 ”Prototype 和 jQuery 还 有 其 他 
库 ， 都 使 用 $() 作为 函数 语法 。 如 
果 你 打算 在 自己 的 开发 环境 中 使 用 





其 中 一 个 库 ， 请 务必 先 阅读 相应 库 
的 文档 ， 看 看 文档 描述 与 本 书 介绍 
有 哪些 出 入 ， 或 者 说 该 库 在 什么 情 
况 下 会 与 其 他 库 发 生 冲 突 。 


A.1.2 内 容 分 发 网 络 


一 定 要 尺 可 能 想 办 法 减少 网 页 文档 的 大 
小 ， 并 让 浏览 器 缓存 文件 。 除 此 之 外 ， 
当然 还 要 让 用 户 尽 可 能 快 地 加 载 到 页 

面 。 对 于 库 来 说 ， 如 果 有 很 多 站 点 要 使 
用 同一 个 库 ， 那 么 最 好 是 把 这 个 库 托 管 
到 一 个 公共 服务 器 上 ， 以 便 所 有 站 点 共 
译 和 访问 。 这 样 ， 当 用 户 从 一 个 站 点 跳 
到 另 一 个 站 点 时 ， 他 们 就 不 用 再 重复 下 
载 相同 的 文件 了 。 


内 容 分 发 网 络 (CDN, Content Delivery 
Network) 可 以 解决 分 布 共享 库 的 问 

jlo CDNX3 ES EHI AS e 14 BC AY P 
络 ， 这 个 网 络 的 用 途 就 是 分 散 存 储 一 些 
公共 的 内 容 。CDN 中 的 每 台 服 务 器 都 包 
含 库 的 一 份 复 本 ， 这 些 服务 器 分 布 在 世 
界 上 不 同 的 国家 和 地 区 ， 以 便 达 到 利用 
市 宽 和 加 快 下 载 的 目的 。 浏 览 器 访问 库 
的 时 候 使 用 一 个 公共 的 URL， 而 CDN 的 
底层 则 通过 地 理 位 置 最 近 、 速 度 最 快 的 
服务 器 提供 相应 的 文件 ， 从 而 解决 了 整 
个 系统 中 的 瓶 宽 问题 。 


Google 为 以 下 这 些 库 提供 了 免费 的 CDN 
服务 : 

















e Dojo 

。 jQuery 

e MooTools 
e Prototype 


e Yahoo! User Interface Library (YUI) 


3$ rff Google CDN 托 管 的 这 些 库 的 最 
新 版 以 及 其 他 特殊 信息 ， 请 访问 
http://code.google.com/apis/libraries/devgt 


使 用 CDN 中 托管 的 库 与 使 用 其 他 
JavaScript 文 件 一 样 。 例 如 ， 以 编写 本 书 
时 的 URL 为 例 ，Google CDN 中 jQuery 库 
的 URL 

是 https://ajax.googleapis.com/ajax/libs/jqu 
， 因 而 在 文档 中 就 可 以 添加 如 

下 <script> 标签: 


<script src="https://ajax.googleapis.com/ 
w 1.4.3/jquery.min.js"></script> 





如 果 你 党 得 仅仅 依赖 Google 或 其 他 CDN 
不 保险 ， 可 以 再 提供 一 个 后 

备 <script> 标签 ， 以 便 在 CDN 不 可 用 
时 从 本 地 服务 器 下 载 相应 文件 。 方 法 很 
简单 ， 无 非 束 是 先 检测 一 下 相应 对 象 是 
售 存 在 ， 如 采 不 存在 就 添加 加 载 本 地 文 
件 的 <script> 标签 : 





<script src="https://ajax.googleapis.com/ 
=» 1.4.3/jquery.min.js"></script> 
<script>!window. jQuery && document.write( 


æ script src-"scripts/jquery-1.4.3.min.j 





注意 ”这 个 方法 使 
用 document .write 在 jQuery 库 没 
有 创建 全 局 window. jQuery 对 象 


的 情况 下 添加 一 个 <script> 标 
签 。 本 附录 中 使 用 的 $ 函数 ， 其 实 
ea 


有 了 后 备 代 码 后 ， 即 便 CDN 的 服务 器 出 
了 问题 ， 也 不 会 连累 你 的 网 站 了 。 


p. 


p. 
y. 


6. 


A.2 语法 


在 展示 具体 的 示例 之 前 ， 应 该 先 介绍 一 
些 很 多 库 都 采用 的 语法 。 


注意 jQuery. Prototype. 
MooTools 及 其 他 很 多 库 ， 都 把 $() 
函数 作为 其 选择 器 方法 的 简写 。 
此 ， 在 本 附录 中 使 用 $() 会 让 示例 
代码 更 通用 一 些 。 不 过 ， 也 要 注 
意 ， 虽 然 调 用 这 个 函数 的 语法 形式 
相似 ， 但 不 同 的 库 在 底层 创建 的 对 
象 则 迎 然 不 同 。 要 了 解 具 体 的 $ 函 
ee 请 查看 相应 库 的 文 





多 数 库 都 文 持 以 点 将 方法 连 缀 起 来 的 语 
法 ， 也 束 是 通过 点 操作 符 把 多 个 方法 调 
用 连接 成 一 行 代码 ; 就 像 我 们 前 面 针 对 
getElementById 用 过 的 一 样 : 


document .getElementById('example').nodeNa 


在 jQuery 之 类 的 库 中 ， 方 法 连 级 是 一 种 
特色 ， 这 些 库 特 意 设计 了 相应 的 方法 ， 
以 便 通 过 连 级 的 形式 将 复杂 的 脚本 连 级 
成 简短 的 代码 。 使 用 这 些 库 时 ， 一 行 脚 
本 完成 多 项 操作 是 司空 见 惯 的 。 举 个 例 
子 ， 使 用 jQuery 先 删除 文档 中 所 有 段落 


的 一 个 类 名 ， 然 后 再 为 它们 添加 另 一 个 
类 名 ， 可 以 这 样 来 写 : 


$('p').removeClass('classFoo').addClass(' 





与 第 9 章 的 那个 添加 类 名 的 函数 相 比 ， 
这 行 代码 可 是 清晰 多 了 。 稍 后 我 们 还 会 
介绍 有 关 $('p' ) EPEAT ES fa Ie 
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便 对 元 系列 表 进 行 操 作 的 循环 结构 ， 而 
吾 法 则 为 此 提供 了 一 种 一 目 了 然 的 
JJF 


仍 以 jQuery 为 例 ， 对 于 下 面 这 个 第 3 章 
示例 中 的 循环 : 








var items = document.getElementsByTagName 
for (var i20; i < items.length; i++) { 
alert(typeof items[i]); 


} 





使 用 jQuery 的 each 方法 可 以 写成 : 


$('li').each(function(i){ 
alert( typeof this ); 
}); 





jQuery 的 each 方法 以 及 其 他 循环 方 
法 ， 会 基于 列表 中 的 每 个 元 素来 执行 一 
个 回调 函数 。 这 个 回调 函数 只 接收 元 素 


在 列表 中 的 索引 作为 参数 ， 并 在 当前 节 
点 的 上 下 文中 执行 ， 因 此 这 个 例子 中 的 
this 引用 的 就 是 每 个 1i 元 素 上 自身 。 


了 解 库 的 基本 语法 之 后 ， 下 面 就 来 看 一 
看 选择 元 素 。 


.A.3 选择 元 素 


到 目前 为 止 ， 你 已 经 知道 怎么 使 用 内 置 
的 DOM 方 法 getElementById 

. getElementsByTagName 以 及 
getElementsByClassName ， 来 分 别 


通过 ID、 标 签 和 类 名 来 选择 元 素 了 。 


能 通过 ID 选择 元 系 很 方便 ， 但 如 果 能 使 
用 各 种 CSS 选 择 器 来 选择 元 素 不 是 更 好 
吗 ? 很 多 库 都 和 jQuery 一 样 ， 提 供 了 类 
似 其 $ 函数 的 高 级 选择 右 方 法 。 使 用 这 
些 方法 ， 可 以 基于 以 下 要 素 进 行 选择 : 


e 带 # 的 ID， 如 $( '#elementid ) 

e 和 带 . 的 类 名 ， 如 $(' .element- 
class') 

e 标签 名 ，z 如 $('tag ' ) 


当然 ， 这 些 选 择 元 素 的 途径 还 算 不 上 十 
分 特别 ， 但 关键 是 还 可 以 使 用 各 种 CSS 
选择 器 Chttp://www.w3.org/TR/css3- 
selectors/Zselectors ) 来 选择 特定 的 元 
素 。 


注意 在 $ 函 数 中 通过 ID 选择 

器 #elementid 选择 元 素 时 ， 该 函 
数 仍然 返回 对 象 列 表 ， 只 不 过 返回 
的 列表 中 只 包含 一 个 元 素 。 这 样 ， 

你 可 以 使 用 连 绥 语 法 继续 调用 each 
及 其 他 jQuery 方法 。 











A.3.1 CSS 选择 器 


除了 使 用 IDD、 类 名 和 标签 以 外 ， 在 多 数 
库 中 都 可 以 使 用 下 列 高 级 的 选择 句 : 


$(*') ERATA; 
$('tag') 选择 所 有 HTML 标 签 中 
的 tag 元 素 ; 

$('tagA tagB') 选择 作为 tagA 
后 代 的 所 有 tagB 元 素 ; 
$('tagA,tagB, tagC') 选择 所 
有 tagA 元 素 、tagB 元 素 和 tagC 


TUR ; 

$('#id') 和 $('tag#id') 选择 所 
有 ID 为 id 的 元 素 或 ID 为 id 且 标 签 
为 tag 的 元 素 ; 

$('.className') 和 
$('tag.className') 选择 所 有 类 
名 为 className 的 元 素 或 类 名 

为 className 标签 为 tag 的 元 素 。 


也 可 以 使 用 组 合 选择 器 $( '#myList 
li') zk$('ul li a.selectMe') 以 
AER ORY Boe E BE ELS BITES TNR e 


jQuery 还 支持 下 列 CSS 2.1 属 性 选择 器 : 


e $('tag[attr]') 选择 所 有 带 
有 attr 属性 的 tag 元 素 ; 

e $('tag[attr-value]') 选择 所 
有 attr 属性 值 恰好 等 于 value 的 
tag 元 素 ; 

e $('tag[attr*-value]') 选择 所 
有 attr 属性 值 中 包含 字符 串 value 
的 tag JITA; 

。$('tag[attr~=value]') 选择 所 
有 attr 属性 值 为 空格 分 隔 的 多 个 
字符 串 且 其 中 一 个 字符 串 等 于 





value 的 tag 元 素 ; 
$('tag[attr*=value]') 选择 所 
有 attr 属性 值 以 value 开头 的 tag 
元 素 ; 

$('tag[attr$-value]') 选择 所 
有 attr 属性 值 以 value 结尾 的 tag 
元 素 ; 

$('tag[attr|=value]') 选择 所 
有 attr 属性 值 为 连 字符 分 隔 的 字 
符 串 且 该 字符 串 以 value 开头 的 
tag TCR; 
$('tag[attr!-value]') 选择 所 
有 attr 属性 值 不 等 于 value 的 tag 
JUS S 


此 外 ， 还 可 以 使 用 子 选择 器 或 同辈 选择 
CI 


e $('tagA > tagB') 选择 作 
2m 元 素 子 元 素 的 所 有 tagB 元 


° $('tagA + tagB') 选择 紧邻 
tagA 元 素 且 位 于 其 后 的 tagB 元 
素 ; 

。$('tagA ~ tagB') 选择 作 
为 tagA 同 非 元 素 且 位 于 其 后 的 所 
有 tagB 元 素 。 


还 可 以 使 用 一 些 伪 类 和 伪 元 素 选择 器 : 


e $('tag:root') 选择 作为 文档 根 
元 素 的 tag JCA: 

e $('tag:nth-child(n)') 选择 作 
为 其 父 元 素 正 数 第 n 个 子 元 素 的 所 
有 tag 元 素 ; 

e $('tag:nth-last-child(n)') 
选择 作为 其 父 元 素 倒 数 第 n 个 子 元 
素 的 所 有 tag 元 素 ; 





$('tag:nth-of-type(n)') 选择 
forse 元 素 中 的 正 数 第 n 


$C tag:nth-last-of- 
type(n)') 选择 几 个 同辈 tag 元 素 
中 的 倒数 第 n 个 ; 
$('tag:first-child') 选择 作 
为 其 父 元 素 第 一 个 子 元 素 的 tag 元 


$('tag:last-child') 选择 作为 
其 父 元 系 最 后 一 个 子 元 素 的 tag 元 








$('tag:first-of-type') 选择 
几 个 同辈 tag 元 素 中 的 第 一 个 ; 
$('tag:last-of-type') 选择 几 
个 同 非 tag 元 素 中 的 最 后 一 个 ; 
$('tag:only-child') 选择 作为 
其 父 元 素 唯 一 子 元 素 的 tag 元 素 ; 
$('tag:only-of-type') 选择 同 
J 的 元 


$C tag:empty') 选择 所 有 没有 子 


元 素 的 tag 元 素 ; 
e $('tag:enabled') 选择 界面 元 素 
中 所 有 已 经 局 用 的 tag 元 素 ; 


$('tag:disabled') 选择 界面 元 
素 中 所 有 已 经 禁用 的 tag 元 素 ; 
$('tag:checked' ) 选择 界面 元 素 
中 所 有 已 经 被 选中 的 tag 元 素 〈 如 
复 选 枉 和 单 选 按钮 ) ; 
$('tag:not(s)') 选择 与 选择 器 s 
不 匹配 的 所 有 tag TA. 

不 同 的 库 对 上 述 选 择 器 的 支持 情况 各 不 


相同 ， 请 查阅 相应 库 的 文档 以 了 解 具体 
的 情况 。 





利用 这 些 选择 器 ， 就 可 以 基于 它们 在 文 
档 中 的 位 置 而 不 必 通 过 类 名 或 ID 而 迅速 
FREER MAREN CA MEH, PRAY 
脚本 不 仅 因 此 可 以 不 再 依赖 于 特定 的 ID 
或 类 名 ， 还 能 减少 选择 元 系 所 需 的 代 

码 。 比 如 说 ， 要 选择 文章 中 mav NAE 
含 的 所 有 链接 ， 可 以 使 用 DOM 方 法 通 

过 下 列 代码 实现 : 





var links = []; 
var articles = document.getElementsByTagN 
for (var a = 0; a « articles.length; a++ 
var navs = articles[a].getElementsByTag 
for (var n = 0; n < navs.length; ne ) 
var links - nav[n].getElementsByTagNa 
for (var 1 = 0; 1 « links.length; 1+ 


links[links.length] = links[1]; 
j 
} 


} 
// 对 链接 执行 相应 操作 





但 利用 选择 器 语法 ， 则 可 以 缩短 为 很 少 
的 字符 ; 


var links = $('article nav a'); 


// 对 链接 执行 相应 操作 








这 样 ， 代 码 不 仅 清 晰 了 很 多 ， 而 且 也 很 
TAB. 


A.3.2 ” 库 所 提供 的 专 有 选择 需 


有 些 库 还 提供 了 专 有 的 选择 器 ， 例 如 
jQuery 文 持 $('tag:even') 和 


$('tag:odd') 选择 器 ， 用 于 选择 偶数 
和 奇数 元 素 。 第 12 章 有 一 个 为 表格 行 添 
加 条 纹样 式 的 函数 : 








function stripeTables() ( 
if (!document.getElementsByTagName) ret 
var tables - document.getElementsByTagN 
for (var i20; i«tables.length; i++) { 
var odd - false; 
var rows - tables[i].getElementsByTag 
for (var j=0; j«rows.length; j++) { 
if (odd == true) ( 
addClass(rows[j],"odd") ; 
odd = false; 
} else { 
odd = true; 





MAI —4yjQueryt U4, Wen Da Ra s 
LUE 奇数 表格 行 并 为 它们 应 用 CSS 属 





$("tr:odd").addClass("odd"); 





怎么 样 ， 是 不 是 简单 明了 ? 


jQuery 还 文 持 其 他 专 有 选择 器 。 


e $('tag:even') 选择 匹配 元 素 集 
中 侦 数 序号 的 元 素 一 一 特别 适合 突 
出 显示 表格 行 ! 

e $('tag:odd') 选择 匹配 元 素 集中 
奇数 序号 的 元 素 ; 


$('tag:eq(0)') fil 
$('tag:nth(0) ') 选择 匹配 元 素 
集中 的 第 一 个 元 素 ， 如 页 面 中 第 一 
个 段落 ; 

$('tag:gt(n)') 选择 匹配 元 素 集 
中 索引 值 大 于 n 的 所 有 元 素 ; 
$('tag:lt(n)') 选择 匹配 元 素 集 
中 索引 值 小 于 n 的 所 有 元 素 ; 
$('tag:first') 等 价 于 :eq(6) 


$('tag:last') 选择 匹配 元 素 集 
中 的 最 后 一 个 元 素 ; 
$('tag:parent') 选择 匹配 元 素 
ABIT 7538. OUAIS B ERE 
的 所 有 元 素 ; 
$('tag:contains('test')') 选 
择 罗 配 元 素 集 中 包含 指定 文本 的 所 
有 元 素 ; 

$('tag:visible') 选择 匹配 元 素 
集中 所 有 可 见 的 元 素 〈 包 括 
display 属性 为 block 和 :inline 

. visibility 属性 为 visible 以 
= pe 属性 不 是 hidden 的 表单 元 
系 ) ; 

$('tag:hidden') 选择 匹配 元 素 
集中 所 有 隐藏 的 元 素 〈 包 括 
display 属性 为 none 

. visibility 属性 为 hidden 以 
及 type 属性 为 hidden 的 表单 元 


^N 




















fi Fd oc Ee e HE ds n] PUDE OT RR 
COEUR 面 中 第 一 个 段落 的 字体 粗 
ZH: 





$("p:first").css("font-weight","bold"); 


fe 


或 者 用 一 行 代码 来 显示 所 有 隐藏 的 
<div> 元 素 : 











$("div:hidden").show(); 








甚至 就 连 要 隐藏 所 有 包含 单 
词 “scared” 的 div 元 素 都 易如反掌 : 








$("div:contains('scared')").hide(); 





最 后 ，jQuery 还 提供 了 一 些 专门 为 表单 





po 的 表达 式 ， 用 于 快速 访问 表单 元 


^N 


e :input 选择 表单 中 的 所 有 元 素 
(input. select. textarea 
. button) ; 

e :text 选择 所 有 文本 字段 
(type="text" ) ; 

e :password 选择 所 有 密码 字段 
(type="password" ) ; 

e :radio 选择 所 有 单 选 按钮 
(type="radio" ) ; 

e :checkbox 选择 所 有 复 选 框 
(type="checkbox" ) ; 

e :submit 选择 所 有 提交 按钮 
(type="submit" ) ; 

e :image 选择 所 有 表单 图 像 
(type="image" ) ; 

e :reset 选择 所 有 重 置 按钮 
(type="reset" ) ; 


e :button 选择 所 有 其 他 按钮 
(type="button" ) 。 


A.3.3 ”使 用 回调 函数 筛选 


在 高 级 表达 式 还 不 能 满足 你 的 需要 ， 或 
者 某 个 库 不 文 持 某 个 表达 式 的 情况 下 ， 
还 可 以 使 用 回调 函数 来 选择 DOM 元 
素 ， 也 就 是 基于 每 个 元 素 执 行 相应 的 饶 
选 代码 。 在 接 下 来 的 所 有 示例 中 ， 回 调 
函数 返回 true 则 意味 着 相应 的 元 素 会 
出 现在 结果 和 集中， 返回 false 则 意味 着 
相应 元 素 不 会 出 现在 结果 集中 。 


如 果 你 想 创建 一 个 反 向 选择 器 ， 那 么 使 
用 回调 函数 会 非常 方便 。 所 有 CSS 选 择 
器 选择 的 都 是 表达 式 最 右 端的 元 素 ， 因 
此 就 没有 办 法 通过 它们 选择 “只 包含 一 
个 图 像 子 元 素 的 所 有 锚 标 签 ”。 但 使 用 
回调 函数 则 可 轻松 实现 这 个 选择 。 假 设 
有 以 下 HTML: 














<ul> 
«li» 
«a name="example1"><img src="exa 
</li> 
«li» 
«a name="example2">No Images Here 
</li> 
«li» 


«a name="example3"> 


Two here! 
«img src-"example2.gif" alt-" 
«img src-"example3.gif" alt-" 
«/a» 
</li> 
</ul> 





使 用 YUI 的 
YAHOO.util.Dom.getElementsBy 方 
法 ， 基 于 本 书 前 面 介绍 的 DOM 元 素 属 
TE, Blupjmxmi A HIA: 


var singlelmageAnchors - YAHOO.util.Dom.g 
// 查找 只 包含 一 个 图 像 子 元 素 的 <a> 节点 


return (e.nodeName == 'A' && e.getEle 




















}); 





此 时 变量 singleImageAnchors 会 包含 
一 个 列表 ， 列 表 中 只 有 一 个 元 素 ， 因 为 
示例 代码 中 只 有 一 个 仅 包含 一 个 图 像 子 
元 素 的 锚 ， 因 此 该 元 素 引 用 的 就 是 <a 


name="examplei"> 。 


Prototype 和 jQuery 为 此 分 别提 供 了 
findAll 和 filter 方法 。 在 连 级 调用 
方法 的 时 候 ， 使 用 这 两 个 方法 就 可 以 得 
选 出 表达 式 返 回 的 元 素来 。 


首先 来 看 一 下 Prototype 的 代码 (使 用 $$ 
选择 器 ) : 














// Prototype 库 的 回调 筛选 函数 
var singleImageAnchors = $$('a').findAll( 
return (e.descendants().findAll(functio 
return (e.nodeName == 'IMG'); 


}).length == 1); 
IDE 





再 看 一 下 jQuery 的 代码 : 











// jQuery 库 的 回调 筛选 函数 


var singleImageAnchors = $('a').filter(fu 


return ($('img',this).length == 1) 
})3 





Prototype 和 jQuery 的 表达 式 选 择 器 应 该 
足以 应 付 大 多 数 的 情况 。 万 一 你 还 需要 








对 元 素 进 行 更 深入 的 分 析 ， 那 么 回调 函 
数 还 可 更 复杂 一 些 。 


AA #/EDOMICH 


每 个 库 都 提供 了 非常 多 的 DOM 操 作 方 
法 ， 毕 竟 操 作 DOM 的 能 力 可 以 体现 一 
个 库 的 水 平 。 这 里 我 们 只 简单 列举 其 中 
几 个 ， 剩 下 的 还 是 请 读者 上 自己 去 查阅 相 
关 库 的 文档 。 


A.4.1 生成 内 容 


用 jQuery 创建 新 的 DOM 元 素 很 简单 。 把 
HTML 代 码 作 为 $ 函数 的 参数 传 入 ， 即 
可 创建 新 的 节点 。 下 面 这 行 代码 就 可 以 
给 文档 的 body oR USI — Th Ht div 
元 素 。 新 的 div 元 素 会 有 一 个 值 

为 example 的 jd ， 并 且 包 含 *Hello”。 











$('«div id="example">Hello</div>').append 





或 者 ， 也 可 以 试 一 试 jQuery 的 模板 插件 
Chttp://api.jquery.com/category/plugins/te 
P 


注意 可 以 使 用 Microsoft CDN? 
托管 的 这 个 模板 插件 。 在 编写 本 书 

时 的 URL 

为 http://ajax.microsoft.com/ajax/jquery. 


使 用 jQuery 模板 插件 可 以 在 HTML 字 符 
串 中 声明 一 些 特殊 的 变量 ， 如 ${term} 
， 这 些 变量 随后 可 以 被 蔡 换 成 一 组 数组 
或 其 他 模板 。 


举 个 例子 ， 以 下 是 第 8 章 的 
displayAbbreviations 函数 : 


function displayAbbreviations() { 
if (!document.getElementsByTagName || !d 
w || !document.createTextNode) return fal 
var abbreviations = document.getElement 
if (abbreviations.length < 1) return fa 
var defs = new Array(); 
for (var i=@; i«abbreviations.length; i 
var current abbr = abbreviations[i]; 
var definition = current abbr.getAttr| 
var key = current abbr.lastChild.node 
defs[key] definition; 
} 
var dlist document.createElement("d1" 
for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement(" 
var dtitle text = document.createText 
dtitle.appendChild(dtitle text); 
var ddesc = document.createElement("d 
var ddesc text - document.createTextN 
ddesc.appendChild(ddesc text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 
} 
var header = document.createElement("h2 
var header_text = document.createTextNo 
header.appendChild(header_text); 
document .body.appendChild(header); 
document .body.appendChild(dlist) ; 





如 果 使 用 jQuery 及 jQuery 模板 插件 ， 可 
以 如 下 重 写 : 


function displayAbbreviations() { 
// 创建 缩写 词 数组 
var data = $('abbr').map(function(){ 
return { 
desc:$(this).attr('title'), 
term:$(this).text() 
}; 
}).toArray(); 
// 添加 到 文档 并 应 用 模板 
$('«h2»Abbreviations«/h2»').appendTo(do 
$.tmpl( "<dt>${term}</dt><dd>${desc} 
.wrapAll("«dl/»") 











); 





更 进一步 ， 还 可 以 把 模板 从 函数 中 分 离 
出 来 ， 根 据 每 一 页 的 具体 情况 来 定义 缩 
写 词 模 板 。 模 板 插件 的 文档 

Chttp://api.jquery.com/tmpl ) 中 详细 介 
绍 了 利用 <script> 元 素 的 更 高 级 模板 
功能 ， 请 读者 自行 参考 。 











A.4.2 ”操作 内 容 


如 果 想 对 现 有 文档 执行 某 些 操作 ， 或 者 
移动 某 些 元 素 的 位 置 ， 可 以 使 用 jQuery 
的 appendTo 或 insertAfter 等 方法 。 
通过 这 些 方法 ， 可 以 找到 一 组 元 素 ， 并 
把 它们 全 都 变 成 为 一 个 元 素 的 子 元 素 。 


例如 ， 可 以 把 一 个 列表 中 的 所 有 元 又 全 
部 转移 到 为 一 个 列表 中 : 








$('ul#list1 1i').appendTo("ul#list2"); 





之 所 以 可 以 实现 这 种 操作 ， 原 因 在 于 每 
个 元 素 在 文档 中 都 只 有 一 个 引用 。 你 让 
它 成 为 另 一 个 元 素 的 子 元 素 ， 也 就 意味 
着 它 必须 与 原来 的 父 元 素 解 除 “ 父 子 关 
系 ”。 假 如 你 想 的 是 复制 这 些 元 素 ， 那 
么 可 以 使 用 jQuery 的 clone 方 法 : 


$('ul#list1 1i').clone().appendTo("ul#lis 


DOM 操 作 在 任何 一 个 库 中 都 受到 了 极 
大 的 重视 ， 它 们 分 别 都 提供 了 一 些 用 于 
Ha 插入 、 添 加 、 前 置 等 操作 的 快捷 
Znk. 











AS ”处理 事件 


综观 全 书 ， 不 难 发 现 事 件 其 实 是 用 户 交 
互 的 根本 所 在 。 没 有 事件 ， 也 就 没有 办 
法 与 页 面 交互 。 


通过 前 面 的 学 习 ， 相 信 你 已 经 掌握 了 一 
些 基本 的 事件 方法 。 说 到 使 用 库 ， 当 然 
很 多 也 都 内 置 了 相应 的 事件 管理 功能 。 
而 且 ， 这 些 库 还 包含 了 浏览 器 没有 原生 
实现 或 者 说 W3C 事 件 人 模块 中 没有 定义 的 
自 定义 事件 的 注册 及 调用 机 制 。 


A.5.1 加 载 事件 


前 面 介 绍 过 一 个 为 页 面 加 载 事件 注册 人 处 
理 方 法 的 函数 ， 即 addLoadEvent : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') 
window.onload = func; 
) else { 
window.onload = function() { 
oldonload(); 


func(); 





利用 这 个 函数 可 以 在 页 面 加 载 的 时 候 执 


行 其 他 函数 : 


function myFucntion() { 


// 在 页 面 加 载 后 执行 一 些 操作 





} 
addLoadEvent (myFunction) ; 





以 上 代码 也 可 以 写成 : 


addLoadEvent(function() ( 
// 在 页 面 加 载 后 执行 一 些 操 作 
})3 








不 同 的 库 也 都 提供 了 类 似 的 方法 ， 只 不 





过 在 实现 方式 上 会 有 所 不 同 。 比 如 说 ， 
jQuery 就 利用 连 级 语法 基于 每 种 事件 类 
型 都 提供 了 相应 的 事件 方法 


(http://api.jquery.com/category/events 


以 addLoadEvent 为 例 ，jQuery 的 
i 方法 以 类 似 的 方式 实现 了 相应 的 
JLI]: 








$(document).ready(handler); 
$(handler); 





第 二 个 方法 假定 document 对 象 

是 ready 方法 的 目标 。 而 ready 方法 可 
以 接收 一 个 匿名 函数 ， 并 将 该 函数 注册 
为 处 理 文 档 就 绪 事 件 的 处 理 函 数 : 


$(document).ready(function() { 
// 在 页 面 加 载 后 执行 一 些 操 作 
})3 








这 样 ， 只 要 DOM 初 始 化 工作 一 完成 ， 
就 会 调用 ready ， 相 应 地 就 会 立即 执行 
传 入 的 回调 函数 。 


如 果 想 像 使 用 addLoadEvent 函数 一 样 
使 用 jQuery 的 方法 ， 只 要 把 
addLoadEvent 蔡 换 成 $ 就 可 以 了 : 


function myFucntion() { 


// 在 页 面 加 载 后 执行 一 些 操作 











$(myFunction) ; 





或 者 干脆 这 样 写 : 


$(function() { 
// 在 页 面 加 载 后 执行 一 些 操作 
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A.5.2 ”其 他 事件 


除了 加 载 事 件 ，jQuery 等 库 还 提供 很 多 
特定 于 元 素 的 事件 ， 例 如 blur 、focus 
. click. dblclick. mouseover 

. mouseout 和 submit ， 等 等 。 


使 用 这 些 事件 方法 ， 可 以 为 DOM 元 素 
批量 注册 事件 处 理 函 数 ， 比 如 为 页 面 中 


的 每 个 链接 注册 相同 的 click 事件 处 理 
PA BX: 


').click( function(event) { 

新 窗口 中 打开 当前 href 中 的 链接 
window.open(this.getAttribute( href')); 
// 阻止 链接 的 默认 动作 




















return false; 
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这 些 方法 还 有 为 一 种 意外 的 用 法 ， 即 在 
没有 用 户 交 互 的 情况 下 ， 你 可 以 通过 调 
用 相应 的 方法 来 触发 元 系 上 已 经 注册 的 
事件 监听 器。 


$('a:first').click(); 





举例 来 说 ， 下 面 是 第 12 章 的 
resetFields 和 prepareForms 函数 : 





function resetFields(whichform) { 
for (var i=@; i«whichform.elements.len 
var element - whichform.elements[i]; 
if (element.type -- "submit") continu 
var hasPlaceholder = element.placehol 
if (!hasPlaceholder) continue; 
element.onfocus = function() ( 


var text = element.placeholder || ele 
if (this.value == text) ( 
this.className = ''; 
this.value = ""; 
} 
} 
element.onblur = function() { 
if (this.value == "") { 
this.className = 'placeholder'; 


this.value = element.placeholder 


j 
element.onblur(); 
} 
} 
function prepareForms() { 
for (var i=0; i<document.forms.length; 
var thisform = document.forms[i]; 
resetFields(thisform); 
} 
} 


} 


addLoadEvent (prepareForms) 





使 用 jQuery 选择 器 和 事件 方法 ， 以 上 准 
备 表单 的 代码 可 以 缩短 为 : 


$(function() ( 
$('form input[placeholder]').focus(func 
var input - $(this); 
if (input.val() == input.attr('placeh 
input.val('').removeClass('placehol 


)).blur(function()( 
var input - $(this); 
if (input.val() == '') { 
input.val(input.attr('placeholder' ) 


} 
})-blur(); 
}); 





6. A.6 Ajax 


Ajax 应 用 爆发 后 ，JavaScript 库 也 变 得 越 
来 越 流 行 起 来 。 很 多 库 中 的 第 一 个 对 象 
就 是 Ajax， 即 便 不 是 ，Ajax 对 象 也 是 这 
些 库 迅速 流行 的 一 个 重要 原因 。 


A.6.1 Prototype 与 Ajax 


最 早 源 于 Ruby on Rails 项 目的 Prototype 
库 ， 就 是 因 Ajax 对 象 而 流行 的 。 
Prototype 提 供 了 几 种 独特 的 Ajax 方法 : 


e Ajax.Request(url, options) 
执行 基本 的 XMLHttpRequest 请 
求 ; 

e Ajax.Updater(element, url, 
options) 包装 请 求 ， 并 且 将 请 求 
返回 的 内 容 目 动 添加 到 给 定 的 
DOM 节 点 中 ; 

e Ajax.PeriodicalUpdater(eleme 
url, options) 按照 一 定 的 时 间 
间 隅 自动 将 请 求 返 回 的 内 容 添 加 到 
给 定 的 DOM 节 点 中 。 


以 上 每 个 方法 中 的 options 参数 都 包含 
下 列 属性 。 


e contentType ， 即 请 求 的 内 容 类 
型 。 默 认 值 为 application/x- 


www-form-urlencoded 。 


e method, ， 即 请 求 的 HITP 方 法 。 
Prototype 对 于 put 和 delete 等 请 
求 的 处 理 方 式 ， 以 post 请 求 重 写 
并 将 原始 请 求 方法 放 到 请 求 的 
method 参数 中 。 默 认 值 为 post 








e parameters ， 即 与 请 求 一 同 发 送 
的 参数 。 这 些 参数 的 格式 可 以 是 类 
似 get 请 求 中 URL 编 码 的 字符 串 ， 
也 可 以 是 类 似 散 列 的 对 象 ， 比 如 数 
组 或 以 属性 名 表示 参数 名 的 对 象 。 
postBody ， 默 认 值 为 nul1 HB 
Epost 请 求 体 中 包含 的 内 容 。 如 
RAZ, ORAL 
parameters 选项 的 内 容 。 
requestHeaders ， 是 一 个 对 象 或 
数组 ， 可 以 通过 它 在 请 求 中 添加 和 额 
外 的 头 部 信息 。 如 果 是 对 象 ， 属 性 
名 和 值 分 别 表示 请 求 头 部 的 名 和 
值 ， 如 果 是 数组 ， 则 偶数 索引 项 
《从 0 开始 算 ) 表示 头 部 信息 的 名 
PK, AAA SII MIFE) K 
示 请 求 头 部 信息 的 值 。 默 认 情 况 
下 ，Prototype 会 在 这 个 属性 中 包含 
几 个 头 部 信息 〈 重 写 就 没有 了 ) : 
o X-Requested-With ， 默 认 情 
况 下 为 XMLHttpRequest ， 供 
服务 器 端 识 别 Ajax 请 求 用 。 你 
可 以 根据 自己 的 需要 设置 。 
o X-Prototype-Version ， 
Prototype 当 前 的 版 本 号 。 
o Accept ， 默 认 设 置 
为 text/javascript 
. text/html 
. application/xml 
. text/xml 和 */* 。 
o Content-type ， 根 

















de contentType 的 值 和 编码 
方式 构建 。 


除了 这 些 属性 外 ， 还 可 以 在 请 求 的 不 同 
阶段 根据 服务 器 的 响应 调用 一 些 回调 方 
法 。 下 列 每 一 个 回调 方法 都 应 该 接收 到 
两 个 参数 ， 一 个 是 XMLHttpRequest 对 
象 ， 另 一 个 在 啊 应 包含 X-JSON 头 部 的 

情况 下 是 啊 应 返回 的 JavaScript 对 象 。 如 
果 没 有 X-JSON 头 部 信息 ， 则 第 二 个 参 

数 为 nulL1 。 唯 一 一 个 例外 

是 onException 回调 方法 ， 它 的 参数 

一 个 是 Ajax.Request 实例 ， 另 一 个 是 
异常 对 象 。 下 面 以 它们 在 请 求 中 被 调用 
的 顺序 列 出 了 这 些 回调 方法 。 


e onException(ajax.request, exc 
在 请 求 或 啊 应 中 出 现 错误 时 被 调 
用 ， 可 能 会 在 下 面 任何 一 个 回调 方 
法 执行 期 间 同 时 发 生 。 
onUninitialized(XHRrequest, j 
在 请 求 对 象 创建 完成 后 可 能 会 被 调 
用 ， 但 不 定 总 会 被 调用 ， 因此 尽 
量 不 要 使 用 它 。 
onLoading(XHRrequest, json) 
在 对 象 创建 完成 且 其 连接 打开 时 可 
能 会 被 调用 ， 但 同样 不 一 定 总 会 被 
调用 ， 因 此 尽量 不 要 使 用 它 。 
onLoaded(XHRrequest, json) 在 
请 求 对 象 创 建 完 成 、 连 接 打 开 且 准 
备 好 发 送 请 求 时 可 能 会 家 调用， 但 
同样 不 一 定 总 会 被 调用 ， 因 此 尽量 
不 要 使 用 它 。 
onInteractive(XHRrequest, jsc 
在 请 求 对 象 接 收 到 部 分 响应 但 尚未 
接收 到 全 部 响应 时 可 能 会 被 调用 。 
没 错 ， 它 同样 不 一 定 总 会 被 调用 ， 




















因此 尽量 不 要 使 用 它 。 

on### (XHRrequest, json) 在 适 
当 的 啊 应 代码 被 设置 时 会 被 调用 。 
### 是 用 来 表示 响应 情况 的 HTTP 状 
态 代码 。 这 个 回调 方法 会 在 啊 应 完 
成 但 尚未 调用 onComplete 之 前 被 
调用 。 这 个 方法 也 会 阻 
iEonSuccess 和 onFailure 回调 
方法 的 执行 。 
onFailure(XHRrequest, json) 
在 请 求 完成 且 有 状态 代码 但 其 状态 
代码 不 是 200 到 299 之 间 的 数值 时 被 
调用 。 
onSuccess(XHRrequest, json) 
在 请 求 完 成 且 状 态 代码 没有 定义 ， 
或 者 状态 代码 介 于 200 到 299 之 间 时 
被 调用 。 
onComplete(XHRrequest, json) 
在 请 求 过 程 的 最 后 被 调用 。 











Prototype 还 提供 了 一 个 全 
局 Ajax.Responders 方法 ， 用 于 控制 


和 访问 进 进出 出 各 种 Ajax.Request 方 


法 的 Ajax 请 求 。 要 了 解 有 

关 Ajax.Responders 方法 的 详细 情 
况 ， 请 参考 Prototype 的 在 线 文 

档 http://www.prototypejs.org/api/ajax/resp 


以 下 是 使 用 Prototype 发 送 Ajax 请 求 的 几 


个 例子 。 





// Prototype Ajax.Request 

















// 创建 一 个 新 的 一 次 性 请 求 并 在 成 功 时 弹出 消息 

















new Ajax.Request ( 
"some-server-Side-script.php', 


method: 'get', 
onSuccess: function (transport) { 





var response = transport.response 
alert('Ajax.Request was success 
}s 
onFailure: function ()( 
alert('Ajax.Request failed’); 


// Prototype Ajax.Updater 

// 创建 一 个 一 次 性 请 求 ， 以 _ responseText 来 填 

new Ajax.Updater ( 
$('ajax-updater-target'), 
'some-server-side-script.php', 


{ 











method: 'get', 
// 将 其 添加 到 目标 元 素 的 上 部 
insertion: Insertion.Top 
} 
) ; 


// Prototype Ajax.periodicalUpdater 

// 创建 一 个 周期 性 的 请 求 ， ie 秒 钟 自动 填充 

new Ajax.PeriodicalUpdater( 
$('ajax-periodic-target'), 
'some-server-side-script.php ', 


{ 





method: 'GET', 

// 添加 到 现 有 内 容 的 上 方 
insertion: Insertion.Top, 
// 每 10 秒 钟 运行 一 次 
frequency: 10 








Ajax.Updater 对 象 的 另 一 个 简单 但 却 
很 给 力 的 用 法 ， 是 隔 一 段 时 间 保 存 一 次 
表单 信息 。 这 特别 适合 在 博客 应 用 中 解 
决 用 户 临 时 保存 数据 的 问题 。 使 

用 Ajax.Updater() 对 象 ， 再 配合 
Prototype 的 Form 序列 化 方法 ， 可 以 从 
表单 中 取得 当前 的 信息 ， 每 隔 几 分 钟 就 











CRAP BURA ae — 1K, AMEA 
意外 丢失 已 经 花 时 间 填 写 的 内 容 。 


// 使 用 Prototype 实现 自动 保存 功能 
// 每 30 秒 钟 就 保存 一 次 #autosave-form #4 
// 然后 更 新 #autosave-status 元 素 标明 更 新 状 
setTimeout(function() { 
new Ajax.Updater( 
$('autosave-status'), 
' some-server-side-autosave-script. 
{ 
method: 'post', 
parameters : $('autosave-form') 


} 



































); 
}, 30000) ; 





A.6.2 jQuery 与 Ajax 


为 了 比较 语法 上 的 异同 ， 接 下 来 看 一 看 
jQuery。jQuery 也 有 一 个 低级 的 $ .ajax 
方法 ， 可 以 接受 各 种 属性 。 不 过 ， 还 是 
先 来 看 看 它 的 那些 简单 易 用 的 方法 吧 。 


e $.post(url, params, 
callback) 通过 POST 请 求 取得 数 
据 。 

e $.get(url, params, 
callback) 通过 GET 请 求 取 得 数 
据 。 

e $.getJSON(url, params, 
callback) 取得 JSON 对 象 。 

e $.getScript(url, callback) 
取得 并 执行 JavaScript 文 件 。 


这 些 方 法 实际 上 都 是 $.ajax() 的 包装 
方法 ， 它 们 的 回调 方法 总 会 被 作 





74$.ajax() 的 成 功 回 调 方法 调用 。 
个 回调 方法 都 接受 两 个 参数 ， 分 别 是 请 


求 对 象 的 啊 应 文本 CresponseT 
和 状态 Cstatus ) : 


ext ) 


$.get('some-server-side-script.php', 
{ key: 'value' }, 
function(responseText, status){ 


// 你 的 代码 


} 
); 


状态 是 以 下 几 个 值 之 一 : 


e success 
e error 
e notmodified 





在 使 用 getJSON 和 getScript 方法 时 
响应 会 被 求 值 ， 因 此 getJSON 方法 中 传 
给 回调 的 参数 是 一 个 JavaScript 对 象 。 


下 面 再 给 出 几 个 使 用 上 述 方法 的 


例子 。 





// 使 用 $.get() 实 现 快速 的 Ajax 调用 








// 创建 一 个 一 次 性 的 请 求 并 在 成 功 时 弹 上 

$.get('some-server-side-script.ph 
{ key: 'value' }, 
function(responseText,status)1( 





消息 
p, 


alert('successful: ' + responseText 


} 
); 


// 使 用 $.getJSON() 加 载 ISON WK 








// 创建 一 个 一 次 性 的 请 求 加 载 ISON 文件 并 在 成 了 
$.getJSON('some-server-side-script.php', 


alert('successful: ' + json.typ 


}); 





e); 


Po 
jQuery 还 提供 了 一 个 load() 方法 : 


e $(expression).load(url, 
params, callback) 把 URL 的 结 
果 加 载 到 相应 的 DOM 元 素 中 。 


这 个 方法 会 以 返回 的 结果 上 自动 填充 相应 
的 一 个 或 多 个 元 素 : 





// $(...).1oad() 用 于 自动 填充 元 素 
// 创建 一 个 一 次 性 的 请 求 ， 用 responseText 的 
$("#ajax-updater-target").load( 
'some-server-side-script.php', 
{ key: 'value' }, 
function(responseText,status) { 


























alert('successful: ' + responseText 





PrototypelfJAjax.Updater() 方法 与 此 
也 是 类 似 的 。 


而 且 ， 也 可 以 使 用 $() 方法 实现 周期 性 
的 保存 功能 : 





// 使 用 jQuery 实现 自动 保存 功能 
// 每 30 秒 钟 保存 一 次 #autosave-form 表单 以 

















// 然后 更 新 #autosave-status 元 素 标明 更 新 状 
setTimeout(function() { 
$('autosave-status').load( 
'some-server-side-script.php', 
$.param({ 
title:$('#autosave-form input[ 
story:$('#autosave-form textare 





}) 
); 


}, 30000) ; 


Pp | 


jQuery 还 有 一 些 Ajax 插 件 ， 例 如 Mike 
Alsup 的 Ajax Form 插 件 

Chttp://plugins.jquery.com/ ) 就 让 处 理 
表单 和 Ajax 事件 变 得 很 容易 。 想 要 像 第 
12 章 那样 通过 Ajax 提交 评论 表单 吗 ? 就 
这 么 简单 ; 





$('#commentForm' ) .ajaxForm(function() { 
alert("Thank you for your comment!") ; 


}); 





这 个 方法 会 将 表单 的 内 容 序列 化 ， 然 后 
将 结果 发 送 给 表单 的 action 属性 中 指 
定 的 脚本 。 


. A.7 动画 和 效果 


到 现在 为 止 ， 我 们 已 经 知道 使 用 库 能 完 
成 很 多 DOM 操 作 和 脚本 任务 了 。 下 面 
我 们 来 至 受 一 些 视觉 上 的 冲击 和 交互 效 
A. 


有 些 库 〈 如 jQuery) 会 内 置 一 些 效果 属 
性 ， 而 另 一 些 库 则 会 依赖 插件 来 提供 效 
果 方 法 。 如 果 你 选择 的 库 没 有 效果 方 
法 ， 建 议 考虑 一 下 Moo fx 和 


Script.aculo.us 。 





e Moo. fx 
(http://moofx.mad4milk.net/ ) 把 
自身 描述 为 “一 个 超 轻 量 、 超 小 
巧 、 超 精简 的 JavaScript 效 果 库 ， 可 
以 配合 prototype .js 
或 mootools 框架 使 用 。” 总 的 来 
ji, Moo. fx 的 使 用 还 是 非常 方便 
的 ， 它 采用 了 一 种 低 抽 象 度 的 方 
式 ， 让 你 指出 元 素 以 及 想 要 在 给 定 
的 时 间 间 隅 内 修改 哪个 CSS 属 性 。 
这 些 修改 只 会 应 用 到 特定 的 元 素 ， 
不 会 应 用 到 该 元 素 的 子 元 素 ( 除 非 
子 元 素 根 据 层 闭 规则 会 继承 相应 的 
CSS 属 性 ) 。 利 用 这 些 低 抽象 度 的 
特性 ， 不 用 编写 太 多 代码 ， 就 可 以 
创造 出 几乎 任何 你 能 够 想到 的 效 
果 。 








e Script.aculo.us 


Chttp://script.aculo.us ) We, "7E 
AEH PSU 览 器 的 JavaScript 用 
户 界 面 库 ， 能 够 让 你 的 网 站 和 Web 
应 用 动 起 来 。 "Script.aculo.us 
采用 的 是 一 种 高 抽象 度 的 方式 ， 提 
供 了 一 些 核心 效果 以 及 在 此 基础 上 
的 组 合 效果 。 在 应 用 这 些 高 级 效果 
的 情况 下 ， 指 定 元 素 的 所 有 子 元 素 
可 能 也 会 受到 影响 。 例 如 ， 在 未 个 
段落 上 调用 Effect.Scale 时 ， 字 
体 的 大 小 也 会 随 着 段落 及 其 他 子 元 
素 的 宽度 和 高 度 的 变化 而 同步 颖 
放 。 这 些 高 级 效果 的 组 合 让 应 用 大 
型 、 复 杂 的 效果 变 得 比较 简单 ， 值 
得 考虑 。 


以 上 这 两 个 效果 库 都 是 构建 在 Prototype 
基础 上 的 ，Moo.fx 也 有 基于 MooTools 
库 的 版 本 Chttp://mootools.net/ ) 。 











注意 ”Moo.fx 需要 通过 $() 和 
$$() 方法 取得 元 素 ， 因 此 再 重申 
一 次 ， 如 果 你 使 用 的 是 这 个 库 ， 那 

么 就 要 在 混合 多 个 库 时 倍加 小 心 。 
采取 最 佳 方式 避免 
冲突 。 


A.7.1 基于 CSS 属 性 的 动画 


动画 的 最 基本 形式 ， 就 是 随 着 时 间 推 移 

改变 一 个 元 素 的 CSS 属 性 ， 比 如 下 面 这 

个 我 们 在 第 和 10 章 看 到 过 的 moveElement 
函数 : 














function moveElement(elementID, final_x, fi 
if (!document.getElementById) return fa 
if (!document. getElementById(elementID) 
var elem = document.getElementById(ele 


if (elem.movement) { 
clearTimeout (elem.movement) ; 


if (lelem.style.left) ( 
elem.style.left = "0px"; 
} 
if (lelem.style.top) { 
elem.style.top = "Opx"; 
} 
var xpos parseInt(elem.style 
var ypos parseInt(elem.style 
var dist 0; 
if (xpos -- final x && ypos -- 
return true; 
} 
if (xpos « final x) ( 
dist = Math.ceil((final x - xpos)/10) 
xpos = xpos + dist; 
} 
if (xpos > final_x) { 
dist = Math.ceil((xpos - final x)/10) 
xpos = xpos - dist; 
} 
if (ypos < final_y) { 
dist = Math.ceil((final y - ypos)/10) 
ypos = ypos + dist; 
} 
if (ypos > final_y) { 
dist = Math.ceil((ypos - final y)/10) 
ypos = ypos - dist; 
} 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
var repeat = "moveElement('"+elementID 
elem.movement = setTimeout (repeat, inter 





使 用 计时 器 和 数学 公式 的 问题 在 于 ， 代 
码 会 在 不 知 不 觉 中 变 得 非常 复杂 元 长 。 
好 在 jQuery 之 类 的 库 可 以 为 我 们 提供 很 
大 的 帮助 。 


上 面 这 个 moveElement MAE BFE 





BEA] BR Pas SE ALAC HY : 


var links = list.getElementsByTagName("a" 

// 为 mouseover 事件 添加 动画 行为 

links[@].onmouseover = function() ( 
moveElement("preview",-100,0,10); 

} 

links[1].onmouseover = function() ( 
moveElement( "preview", -200,0,10); 


} 


links[2].onmouseover = function() ( 
moveElement("preview",-300,0,10); 


} 





我 们 可 以 把 moveElement 相关 的 逻辑 
集中 起 来 ， 通 过 jQuery 的 animate 方法 
来 为 preview 元 素 应 用 位 置 动 画 。 这 
个 animate 方法 以 CSS 属 性 及 最 终 值 的 
列表 作为 参数 ， 能 够 按照 指定 的 时 间 间 
隔 从 当前 值 开 始 修改 相应 的 属性 值 。 


$('a').each(function(i) ( 
var preview = $('#preview'); 
var final x = i * -100; 
$(this).mouseover(function()( 
preview. animate({left:final_x}, 10); 





这 就 比 第 10 章 的 代码 简单 多 了 。 使 用 








jQuery 只 需 几 行 代 码 ， 而 且 不 必 担 心 复 
杂 的 数学 计算 和 计时 器 问题 。 


当然 ， 还 不 止 于 此 ， 你 还 可 以 控制 动画 
的 变化 过 程 。jQuery 的 animate 方法 为 
此 还 接受 男 一 个 参数 : 


$(expression).animate( properties, durati 





第 三 个 参数 easing 是 一 个 函数 ， 用 于 
计算 动画 在 特定 时 间 段 内 的 速度 。 这 些 
KAIF BORIS HIN RE 非常 复 
杂 ， 但 借助 它们 来 改变 速度 却 能 创建 出 
精彩 的 淡 入 淡出 以 及 弹跳 效果 。jQuery 
库 中 默认 的 绥 动 函数 只 有 默认 的 swing 
和 速度 恒定 的 linear 。 


要 想得到 更 多 绥 动 疯 数 ， 可 以 在 jQuery 
UI 套件 (http://jqueryui.com/ ) 或 jQuery 
绥 动 插件 

Chttp://gsgd.co.uk/sandbox/jquery/easing 
) PRR 








A.7.2 组合 动画 


不 少 库 都 提供 了 一 些 组 合 动画 ， 以 方便 
开发 人 员 使 用 。 例 如 ， 在 不 用 插件 的 情 
况 下 ，jQuery 提 供 了 下 列 方法 。 


e fadeIn 和 fadeOut . 

e fadeTo 将 匹配 元 素 的 不 透明 度 调 
整 到 指定 的 值 。 

e slideToggle ~ slideDown 和 
slideUp 用 * 滑 移动 画 ” 隐 藏 和 显示 
匹配 的 元 素 。 


其 他 库 ， 比 如 Script.aculo.us ， 还 
提供 了 更 多 高 级 动画 效果 ， 比 如 下 面 这 
些 。 





e Effect.Appear 、Effect.Fade 
e Effect. Puff 


Effect.DropOut 
Effect.Shake 
Effect.SwitchOff 
Effect.BlindDown 和 
Effect.BlindUp 
Effect.SlideDown il 
Effect.SlideUp 
Effect.Pulsate 
Effect.Squish 
Effect.Fold 
Effect.Grow 
Effect.Shrink 


A.7.3 注意 可 访问 性 


在 使 用 恰当 的 情况 下 ， 微 妙 的 效果 可 以 
起 到 提示 变更 的 作用 。 动 画 和 效果 也 可 
以 把 人 的 注意 力 吸 引 到 界面 的 某 个 地 
方 ， 从 而 引导 交互 顺利 进行 ， 或 者 只 是 
让 访客 感到 惊喜 并 给 人 留 下 难 坊 的 印 
象 ， 为 没有 什么 新 意 的 HTML 添 加 一 点 


^Efg Use 


请 注意 ， 应 用 效果 时 要 时 刻 提醒 自己 注 
意 可 访问 性 。 看 上 去 美不胜收 的 各 种 效 
FR, WOR AM BU NA EDS. 
怕 束 得 不 偿 失 了 。 





. A.8 小结 


在 本 附录 中 ， 我 们 探讨 了 为 什么 库 能够 
帮 我 们 简化 日 第 的 编程 工作 。 篇 幅 所 
限 ， 不 可 能 面面俱到 地 谈 到 所 有 库 或 者 
库 的 所 有 功能 。 为 此 ， 请 感 兴趣 的 读者 
目 行伍 阅 相 关 库 的 文档 ， 从 而 全 面 了 解 
库 的 特点 ， 作 出 正确 的 选择 。 


选择 库 的 时 候 ， 一 定 要 全 面 考察 目 己 看 
中 的 每 一 个 候选 库 。 搞 清楚 如 何 处 理 库 
之 间 的 冲突 ， 功 能 太 少 还 是 太 多 ， 有 没 
有 坚强 的 社区 做 后 盾 ， 或 者 说 能 人 否 得 到 
及 时 的 技术 支持 。 在 选 定 了 合适 的 库 以 
后 ， 还 要 上 尽 可 能 发 挥 出 这 个 库 的 最 大 效 
用 。 与 此 同时 ， 最 好 能 够 进一步 理解 库 
的 工作 原理 。 依 赖 于 库 不 要 紧 ， 关 键 是 
不 要 只 集 留 在 简单 的 使 用 这 个 表面 上 。 














s AS 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 
contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 
与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联 
系 专用 客服 邮箱 : 


ebook@turingbook.com. 
在 这 里 可 以 找到 我 们 : 
e 微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 
播报 
e WR @ 图 灵 社 区 : 电子 书 和 好 文章 


TH AS. 


° o @ 图 灵 新 知 : 图 灵 教 育 的 科普 











。 微 信 图 灵 访 谈 ituring_interview, 
讲述 码 农 精 彩 人 生 
。 微 信 图 灵 教 育 turingbooks 
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